在我的网页上延迟加载图像

Question

经过一些研究，在我提出一些问题之后，我意识到以下几点：jQuery插件Lazy Load（http://www.appelsiini.net/projects/lazyload）在Safari上不起作用，甚至没有在Firefox上。

我刚刚测试了他们的演示。

请你需要使用Firebug，看看所有图像是如何在开始时一次加载，然后再次加载滚动（所以你实际上有双重下载）。

你能给我一个如何实现mashable.com图像延迟布局的解决方案吗？

感谢

Answer 1

这样做：

 <img alt='some_text'  _src="img_url" class='lazyLoad'>
  // please note i have added underscore character before 'src'

jQuery(function(){
     jQuery('.lazyLoad').each(function(){
           var _elm= jQuery(this);
           _elm.attr('src',_elm.attr('_src'));

           //on DOM ready loop through each 
          //image with class=lazyLoad and add src attribute to it.
       })
});

Answer 2

在Mac上的FF 3.6上似乎不适合我，我创建了自己的插件，工作正常，称为 JAIL（Jquery异步图像加载器）

尝试查看project homepage并告诉我您的想法。希望它有所帮助

Answer 3

它是自动删除图像src的一部分，它不再起作用。这是因为现代浏览器加载图像的方式发生了变化。 2009年12月23日发布的1.5版提供了替代方案，您必须在original属性中更改HTML并存储图像URL。我最近将其重命名为data-original，以便HTML5友好。我还更新了documentation，更好地解释了如何使用它。