懒人加载图片如何

问题描述 投票：11回答：6

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

这个页面是多么痛苦地慢，超过2mb！

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

还有其他想法吗？

javascript html css lazy-loading lazy-evaluation
6个回答
7
投票

Four options:

以下是三个选项：

使用背景图片

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分页

我不确定你是如何进行过滤的，但如果你有一个包含产品信息的元素，你可以将图像URL存储在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，Prototype，YUI或any of several others这样的JavaScript库为你平滑粗糙的边缘，那么很多东西会变得容易多了。 （你已经说过你正在使用jQuery。）

4
投票

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

1
投票

我相当肯定在没有某种Javascript干预的情况下，在纯HTML中是不可能的。

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

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

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

1
投票

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

1
投票

我为自己的网站编写了以下代码。我使用了JQuery：1。命名所有类，其中U想要延迟加载同名，说“async”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/

0
投票

编辑：我重新阅读您的问题，并注意到您也希望这适用于禁用Javascript的人！然后是的，我的答案是不可接受的 - 但我会留下它作为记录。

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.