【问题标题】:Lazy loading images [duplicate]延迟加载图像[重复]
【发布时间】:2011-04-07 14:30:39
【问题描述】:

我正在寻找一个支持延迟加载图像的 JQuery 插件。 Lazy Load JQuery plugin 不再受支持,并且在 Firefox 中不起作用。

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

我也愿意接受其他方法。我有一个隐藏的 div,其中包含我不想加载的图像,除非使 div 可见。让我知道在这种情况下是否有更好的方法来延迟图像加载。

【问题讨论】:

标签: javascript jquery image lazy-loading


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

这样就实现了只在tab被选中时才加载图片的目的,并且是有效的html5!

【讨论】:

  • 这并不理想,显然有些浏览器对“#”发出了冗余的 http 请求,这很糟糕。此外,“src”属性和 标签 (dev.w3.org/html5/spec/the-img-element.html#attr-img-src) 的当前定义表明这实际上不是有效的 HTML5。在实践中,它似乎运作良好,但它不是我们的白鲸。
  • 为什么不把 src 设置为一个很小的透明图像而不是 "#"。
  • @user191688 是的,我认为这可能是最安全的方法,尽管我不确定有效性是否值得对我提出一个小小的 http 请求。
【解决方案2】:

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

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

在 FF 中启动它,它会起作用的。

【讨论】:

    【解决方案3】:

    我知道开发人员说它不起作用,但我现在在一个项目中使用 LazyLoad,它在 FF 中运行良好(我使用的是 Firefox 4)。下载和设置大约需要 24 秒,所以试试看它是否适合你 :)

    【讨论】:

    • 根据我的测试,它在任何版本的 Internet Explorer 中都不起作用(尝试过 7、8 和 9)。
    【解决方案4】:

    我很确定 Javascript 有点矫枉过正而且有点倒退(特别是如果使用脚本上没有 defer="" 属性的 jQuery),因为解析和执行 javascript 确实需要时间。相反,使用 decoding attribute 设置为 async 像这样。

    <img src="/path/to/file.jpg" decoding="async"></img>
    

    另外,我假设您想要延迟加载图像的最可能原因是让您的网站加载更快。如果是这种情况,那么您可以通过将图像转换为 jpeg 并使用 compressor.io/JPEGmini 压缩它们来使您的网站加载速度更快(将您的 jpeg 文件上传到两者并使用之后结果更小的压缩)。

    接下来,虽然还没有对所有浏览器提供全面支持,但越来越多的浏览器开始支持它。我更喜欢采取实用的方法,让我的网站充满快速的新功能,并在我的网站通过更多支持的浏览器更快地增长时退居二线,而不是花费大量时间让我的网站在旧的过时浏览器上快速加载只是为了满足我真正应该更频繁地更新浏览器的一小部分用户。

    【讨论】:

      【解决方案5】:

      有一个很好的轻量级 jquery 插件——imgr。在这里查看https://github.com/agaase/imgr

      它具有以下主要特点 -

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

      【讨论】:

      • 您的脚本对我来说运行良好,尽管我根据自己的需要做了一些调整。在 'isOnScreen' 方法中,我添加了 'if (elem.is(":hidden")) return false;'在开始时让脚本不在未显示的元素上加载图像。在 'displayImg' 中,我将逻辑翻转为 'if (type === "img") {' 然后设置 'src' 否则设置背景(我将背景设置为
      • 元素)。最后,当我切换过滤器时,我需要 CheckForImagesToLoad,所以我添加了一个附加选项来传递一个选择器,该选择器可用于“checkAndLoad”以绑定点击事件。谢谢!
    • 太好了,你可以根据需要自定义!!
    • 【解决方案6】:

      找到这个解决方案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>
      

      【讨论】:

        【解决方案7】:

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

        不过没关系,现在我想向您展示我的解决方案,即使是其他可能想做类似事情的人。

        这个例子在第一个视图上看起来很大,但它主要是创建示例结构。最有趣的一行是插件上的.update() 调用。

        lazy.update();
        

        标签更改后,我们强制插件通过这一行更新视图。其他一切都是自动管理的。很简单。

        可以在下面找到工作示例。如果你喜欢玩它,我也创建了一个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>

        【讨论】:

          【解决方案8】:
              <img src="#" data-src="/img/foo.png"/>
              .........................................................................
              $('img[data-src]').each(function() {
                  $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
              });
          

          【讨论】:

            猜你喜欢
            相关资源
            最近更新 更多
            热门标签