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

Question

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

由于

Answer 1

给图像没有src属性，只是一个expando属性，例如url。然后，您可以在滚动到视图时设置src属性。在某些环境中实际上可能会更好地设置背景图像（Ipad website image performance and memory），因此这也值得考虑。这不是真正经过测试的代码，但它应该非常接近：

$(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;
      }
    }

  });
});