懒惰加载图片

Question

我正在寻找一个支持延迟加载图片的JQuery插件。不再支持Lazy Load JQuery plugin，但在Firefox中无效。

有没有人知道支持大多数现代浏览器的好选择？

我也对其他方法持开放态度。我有一个隐藏的div与图像，我不想加载，除非div是可见的。让我知道在这种情况下是否有更好的方法来推迟图像负载。

Answer 1

我在标签页样式页面中遇到类似情况，其中最初不可见标签中的内容不必要地下载。我采用的解决方案是创建标记，如：

<img src="#" data-src="/img/foo.png"/>

然后在处理选项卡转换的javascript中，我还将“data-src”属性替换为这些图像的“src”属性。

$thisTab.find('img[data-src]').each(function(img) {
    var $img = $(img);
    $img.attr('src', $img.attr('data-src'))
        .removeAttr('data-src');
});

这样就完成了选择选项卡时只加载图像的目标，并且是有效的html5！

Answer 2

我遇到了一个问题，它也没有在FF中工作，但是当我用图像填写初始src属性值时我得到了它，就像Monsieur Tuupola在这个示例页面上做的那样，他使用的是1px x占位符的1px灰色gif图像：

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

在FF中开火，它会起作用。

Answer 3

我知道开发人员说它没有用，但我现在正在项目中使用LazyLoad，它在FF中工作正常（我使用的是Firefox 4）。下载和设置大约需要24秒，所以试试看它是否适合你：）

Answer 4

有一个很好的轻量级jquery插件 - imgr。点击https://github.com/agaase/imgr。

它具有以下主要功能 -

1. 其移动优化;所以它也适用于移动浏览器。
2. 它支持普通图像元素和带背景图像的元素。
3. 您可以在滚动时执行延迟加载的图像，也可以在加载页面后加载所有图像。

Answer 5

找到此解决方案here

<h1>List of 10 alberts</h1>
    <div class="albert_container"></div>
    <div class="loading_albert" style="display:none;"><span>Loading ....</span></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var req = '';
            $(window).scroll(function () {
                console.log(req);
                if (req === 'sent') {
                    return false;
                }
                if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                    req = 'sent';
                    showLoader();
                    setTimeout(function () {
                        fetchAlberts();
                    }, 1000);
                }
            });
            function fetchAlberts() {
                var html = '';
                $.get("/ByKishor/data.php").done(function (response) {
                    var data = JSON.parse(response);
                    for (var i in data) {
                        html += "<div class='albert_child'><b>" + i + "</b> : " + data[i].name + "</div>";
                    }
                    $(".albert_container").append(html);
                    req = '';
                    hideLoader();
                });
            }
            function showLoader() {
                $(".loading_albert").show();
            }
            function hideLoader() {
                $(".loading_albert").hide();
            }
            fetchAlberts();
        });
    </script>

Answer 6

我可以肯定的是Javascript有点过大，并且有点落后（特别是如果使用在脚本中没有Promise属性的jQuery），因为解析和执行JavaScript确实需要时间。而是使用decoding attribute设置为异步，就像这样。

defer=""

此外，我假设您最想延迟加载图片的最可能原因是使网站加载速度更快。如果是这种情况，那么您只需将图像转换为jpegs并用compressor.io / JPEGmini压缩它们即可（仅将jpeg文件上传到这两者并使用其中的任意一个即可），从而使您的网站加载速度更快甚至更快。压缩后结果变小。

接下来，虽然还没有所有浏览器的全面支持，但越来越多的浏览器开始支持它。我喜欢采用一种实用的方法来使我的网站具有快速的新功能，并且在我的网站通过支持更多的浏览器增长得更快时退居二线，而不是花费大量的时间使我的网站在旧的过时的浏览器上快速加载只是为了容纳我确实应该更频繁地更新其浏览器的一小部分用户。

Answer 7

Google宣布了img标签的新属性，该属性可自动处理Google I/O 19中的图像的延迟加载。它的工作原理如下：

<img src="IMAGE_URL" alt="IMAGE_DESCRIPTION" loading="lazy">

Chrome支持新属性（ loading =“ lazy” ），并且不再需要插件或框架。

Answer 8

我刚刚使用jQuery.Lazy创建了一个示例，以另一种方式解决了这个问题，然后发现这些问题有点老了。 ;）

但是没关系，现在我想向你展示我的解决方案，即使对于其他想要做这样事情的人也是如此。

此示例在第一个视图中看起来很大，但主要是创建示例结构。最令人兴奋的一行是对插件的.update()调用。

lazy.update();

更改标签后，我们强制插件通过此行更新视图。其他一切都是自动管理的。非常容易的imo。

可以在下面找到工作示例。如果您喜欢玩它，我也创建了jsFiddle。

// create a lazy instance
var lazy = $("img").lazy({
    chainable: false,
    visibleOnly: true,
    appendScroll: $("#content div"),
    // below config is just for demo purpose
    threshold: 0,
    afterLoad: function(e) {
        var image = e.attr("src").match(/tab\+(.*)\: image (\d)/g)[0];
        console.log(image.replace("+", " ").replace("%20", " "));
    }
});

// your tab controller
$("#header li").click(function() {
    $("#content div").hide().eq($(this).index()).show();
    // update lazy instance after tab change manually
    lazy.update();
});

html * {
  margin: 0;
  padding: 0;
}
ul#header {
  list-style: none;
  margin: 10px 10px 0;
}
ul#header li {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 4px 10px;
  margin-right: 10px;
}
ul#header li:hover {
  cursor: pointer;
  color: #f00;
}
div#content div {
  display: none;
  width: 520px;
  height: 350px;
  overflow: auto;
  background: #ccc;
  padding: 10px;
  border: 1px solid #000;
  margin-left: 10px;
}
div#content div img {
  width: 500px;
  height: 200px;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<ul id="header">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="content">
  <div style="display: block;">
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+one: image 5" />
  </div>
  <div>
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+two: image 5" />
  </div>
  <div>
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 1" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 2" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 3" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 4" />
    <img data-src="//dummyimage.com/500x200/000/ffffff&text=tab+three: image 5" />
  </div>
</div>

Answer 9

    <img src="#" data-src="/img/foo.png"/>
    .........................................................................
    $('img[data-src]').each(function() {
        $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
    });