懒人加载图片如何

时间：2010-10-27 13:13:12

标签： javascript html css lazy-loading lazy-evaluation

我正在开发一个eshop。基于类别的产品页面我推出了一些基于javascript的过滤。但是，如果某个类别包含大量产品，则会出现问题。 这个链接有类似我做的... http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

这个页面的速度是多么缓慢且超过2mb !!!

每个产品对我来说都需要一半的killobyte，但形象是问题.. 所以我正在寻找如何懒惰加载图像.. 由于我的页面具有不同于该站点的分页，我认为加载仅对页面可见的图像是一种解决方案。然而，探测器是如何为javascript和非javscript启用的人工作的。 我唯一的解决方案是将链接存储在css类中以某种方式显示非可见产品的图像，如果在过滤后通过javascript显示图像src ... 非JavaScript用户不会遇到此问题，因为点击过滤器会将其导航到其他页面...

还有其他想法吗？

7 个答案:

答案 0 :(得分：7)

四个选项：

以下是三个选项：

使用背景图片

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>

...然后页面会根据您的想法返回尽可能多的内容。您使用Ajax请求页面并使用JavaScript更新产品列表。既然你已经说过你使用jQuery，那么这很简单：

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

这是example prototype（非生产代码）;它伪造了Ajax，因为JSBin给了我Ajax问题。

一个大页面下载，然后是客户端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-前缀的原因是验证：从HTML5开始，您可以定义自己的data-xyz属性，您的网页仍会通过验证。在早期版本的HTML中，您不允许定义自己的属性（尽管实际上没有主要的浏览器关注），因此如果您使用自己的属性，页面将无法验证。

参考文献（w3.org）：

偏离主题，但如果你使用像jQuery，Closure，{{3}这样的JavaScript库，那么这些内容的很多会变得容易多了}，Prototype或YUI为你平滑粗糙的边缘。（你已经说过你正在使用jQuery。）

答案 1 :(得分：4)

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

答案 2 :(得分：1)

我很确定如果没有某种Javascript干预，那么在普通的HTML中是不可能的。

毕竟，如果没有脚本可以做到这一点，为什么有人会首先在Javascript中实现它？

我的问题是：你有多少访问者，这些天没有启用Javascript？我打赌它很少。在任何情况下，这些人习惯于在禁用javascript时功能不全的网站;如果他们必须忍受的唯一区别是加载速度较慢，那么你的网站实际上会比大多数网站更好。

（ps - 我认为你正在为启用Javascript的人使用Jquery's LazyLoad plugin吗？）

答案 3 :(得分：1)

我建议实施responsive image approach以避免在无法正确显示的设备上显示大量图像文件（或人无法区分）。

答案 4 :(得分：1)

我为自己的网站编写了以下代码。我用过JQuery： 1.命名所有类，其中U想要通过相同的名称延迟加载，说“异步” 2.将实际图像位置从'src'复制到'alt'属性 3.完成页面加载后，我的脚本会将所有'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/

答案 5 :(得分：0)

编辑：我重读了您的问题＆amp;注意到你也希望这适用于禁用Javascript的人！然后是的，我的回答是不可接受的 - 但我会把它留作记录。

以下是一些用于Image Lazy Loading的Javascript库。

它们可以帮助您加载元素所需的图像。只需更改图像src属性即可查看。

重要：我仍在调查哪些Javascript库最适合使用。做你的家庭作业我会说，花一些时间来寻找什么是最好的工具。我的要求通常是：license，dependencies，browser support，device support，weight，community和history。

答案 6 :(得分：0)

浏览器级别的支持

现代浏览器可以使用 loading="lazy" 属性延迟加载图像！

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

有关详细信息，请访问 here。

相关问题
最新问题