代码之家 › 专栏 › 技术社区 › GorillaApe

如何延迟加载图像

lazy-evaluation lazy-loading css html javascript

GorillaApe · 技术社区 · 15 年前

我正在开发一个eshop。在基于类别的产品页面上,我添加了一些基于javascript的过滤。但是,如果一个类别有很多产品,就会出现问题。 http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

这一页怎么会慢得让人痛苦,而且超过了2兆!!!

对我来说,每件产品都需要一半的killobyte,但形象就是问题所在。。因为我的页面有不同于那个站点的分页,我认为加载只有页面可见的图像是一个解决方案。但是问题是如何做到这一点,以便同时为javascript和非javscript启用的人工作。。唯一的解决方案是在css类中为不可见的产品存储图像的链接,如果通过javascript过滤更改后显示图像src。。。

还有别的主意吗?

6 回复 | 直到 15 年前

Community Mohan Dere 9 年前

四种选择:

这里有三种选择:

使用背景图像

Kangkan's background answer

如果这对您不起作用,我假设您只需要有关支持JavaScript的内容的帮助,因为您说过非JavaScript用户将看到不同的页面。

使用插件

已经完成 . 你在评论中说你在使用jQuery。有很多用于分页的jQuery插件。找一个你喜欢的,然后用它。它们的质量各不相同,所以您需要测试它们并检查它们的代码,但我相信有一个不错的质量。

服务器端分页

<ul id='productList'>
</ul>

然后,您将拥有在结果页面之间移动的常用UI控件。您将拥有一个服务器端资源,该资源返回HTML片段或JSON格式的数据,您可以使用这些数据填充该列表。为了简单起见,我将使用HTML(尽管我可能会在生产应用程序中使用JSON,因为它往往较小)。每个产品条目都是自己的独立块:

<li id='product-001'>
  <div>This is Product 001</div>
  <img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
  <div>Blurb about Product 001</div>
</li>

$('#productList').load("/path/to/paging/page?start=X&count=Y");

这是一个 example prototype

一个大页面下载,然后客户端JavaScript分页

我不知道你是如何进行过滤的,但是如果你有一个包含产品信息的元素,你可以在 data-xyz 属性:

<div id='product-123' data-image='/images/foo.png'>

然后当您的代码使其可见时,您可以轻松地添加 img 致:

var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
    img = document.createElement('img');
    img.src = imgsrc;
    prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
    prod.removeAttribute('data-image');
}

在其他地方的评论中,你说你在使用jQuery。如果是这样,上述内容的翻译可能如下:

var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
    $("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
    prod.removeAttr('data-image');
}

我之所以使用 data- 数据xyz 属性和页面仍将通过验证。在早期的HTML版本中,不允许您定义自己的属性(尽管在实践中没有主要的浏览器关注),因此如果您使用自己的属性进行此操作,页面将不会验证。

~~没有话题,但是许多 jQuery , Closure , Prototype , YUI ,或 any of several others~~ (从那以后你就说你在使用jQuery。)

Kangkan 15 年前

如果您只是希望缓慢加载图像,而页面的其余部分先加载,则可以将图像作为背景,而不使用 <img> 标签。如果你使用 < 标签,图像在加载页面时加载,因此页面加载变慢。但是,页面显示给用户后,将加载背景图像。用户可以阅读文本并在一段时间后看到图像加载。

Spudley Pat 15 年前

我相当肯定,如果没有某种Javascript干预,在纯HTML中是不可能的。

我的问题是:现在有多少访问者没有启用Javascript?我敢打赌很少。在任何情况下,当这些人禁用javascript时,他们习惯于站点不能完全正常工作;如果他们必须忍受的唯一区别是加载速度较慢,那么你的站点实际上会比大多数人更好。

(ps-我想你在用 Jquery's LazyLoad plugin 对于支持Javascript的人?)

Pavel Podlipensky 13 年前

我建议实施 responsive image approach

Jeff_Alieffson 12 年前

我为自己的网站编写了以下代码。我用了JQuery: 一。给所有类命名,如果你想用相同的名称延迟加载,就说“async” 2。将实际图像位置从“src”复制到“alt”属性三。完成页面加载后,我的脚本将把所有'alt'值复制到'src' 看看例子。这是完整的工作示例html:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript">
        $(document).ready(function(){
            $('img.async').each(function(i, ele) {
                 $(ele).attr('src',$(ele).attr('alt'));
            });
        });
        </script> </head> <body> <img class="async" title="ÐÐ¾ÑÐ¾ÑÐºÐ¾Ð¿Ñ" alt="http://virtual-doctor.net/images/horoscopes.jpg" width="135" height="135"/> 
</body>
</html>

你可以在真实的网站上感受到我使用它的速度 http://virtual-doctor.net/

Adriano 12 年前

编辑:

下面是一些用于图像延迟加载的Javascript库。

它们通过简单地更改image src属性,帮助您在元素“可能”在视图中时加载所需的图像。

github.com/toddmotto/echo 和 toddmotto.com/echo-js-simple-javascript-image-lazy-loading github.com/toddmotto/echo/graphs/contributors
github.com/dinbror/blazy/ 和 dinbror.dk/blog/blazy -纯JS,IE7+,1.2KB(minified和gzip),只有一个贡献者 github.com/dinbror/blazy/graphs/contributors
github.com/tuupola/jquery_lazyload www.appelsiini.net/projects/lazyload :jQuery dependency,麻省理工学院许可证,使用Safari 5.1、Safari 6、Chrome 20、Firefox 12(在OSX和Chrome 20上)、IE 8和IE 9(在Windows上)、Safari 5.1(在iOS 5、iPhone和iPad上)进行测试。18个贡献者 https://github.com/tuupola/jquery_lazyload/graphs/contributors
github.com/luis-almeida/unveil 和 luis-almeida.github.io/unveil -特别:轻量级版本的Lazy Load github.com/tuupola/jquery_lazyload :IE7+,jQuery依赖项,MIT许可证,5个贡献者 https://github.com/luis-almeida/unveil/graphs/contributors
github.com/shprink/BttrLazyLoading 和 bttrlazyloading.julienrenaux.fr github.com/shprink/BttrLazyLoading/graphs/contributors

重要的 :我仍在调查哪些Javascript库最适合使用。做你的家庭作业,我会说,花点时间去寻找最适合这份工作的工具。我的要求通常是: license , dependencies , browser support device support , weight , community ,和 history .