我有一系列以图片为背景的div,当时有1-2 MB的大图片。

我只想在可见的情况下加载其中的内容。

(它们显示为:默认情况下为none,我使用jquery向下/向上滑动各种链接的onclick)。

最佳答案

下面是一个可行的想法的概图。为您要加载的每张照片创建隐藏的图像标签,直接附加onload事件处理程序。 insert只是获取刚刚加载的图像,并创建一个css background规则以插入到相应的div中。

<!DOCTYPE html>
<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
      div.placeHolder {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>


  <img  data-id='imageA'
        src='http://some-large-image.jpg'
        style='display:none;'
        onload='insert(this);' />

  <div data-id='imageA' class='placeHolder' style='display:none;'></div>

  <script>
    function insert(img){
      $img = $(img);
      $div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
      var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
      $div.css('background', cssSnippet).show();
    }
  </script>

  </body>
</html>

10-05 20:56
查看更多