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

【问题标题】：lazy loading of images on my webpage在我的网页上延迟加载图像
【发布时间】：2010-09-25 14:54:12
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

标签： jquery jquery-plugins

【解决方案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.
       })
});

【讨论】：

mhm，所以唯一的方法是更改原始代码？这对我来说有点问题，因为我没有静态页面。
您是否正在寻找类似的东西：在初始加载显示时，只有那些存在的图像是窗口的可见区域，并在滚动发生时加载更多图像。像 youtube 一样。??
一个很好的例子是 mashable.com 。但关键是我无法按照您的建议更改原始 html 代码（即 _src）。据我所知，唯一的方法是更改原始代码。

【解决方案2】：

在 Mac 上的 FF 3.6 上似乎不适合我，我创建了自己的插件，名为 JAIL (Jquery Asynchronous Image Loader)

尝试查看project homepage，让我知道您的想法。希望对你有帮助

【讨论】：

【解决方案3】：

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

【讨论】：