image - 加载您在网页中看到的内容

Question

我有一个网页，我必须在其中显示很多图像，因此页面加载缓慢。我想做一些类似谷歌图片的事情：你看不到的图片不会加载。有没有办法轻松做到？

谢谢

Answer 1

Give the images no src attribute, just an expando attribute, url for example. Then you can set the src attribute when it is scrolled into view. It may actually perform better in some environments to set the background image (Ipad website image performance and memory), so this is also worth considering. This isn't really tested code, but it should be pretty close:

$(function(){
  var $images = $("img");
  var iNextImageToLoad = 0;
  $(document).scroll(function(){
    for(var i = iNextImageToLoad; i < $images.length; i++){
      if( $(window).scrollTop() + $(window).height() > $images.eq(i).offset().top ){
        //image is in view
        $images[i].attr(src) = $images[i].attr(url);
        iNextImageToLoad = i+1;
      }
    }

  });
});