Question

这不重复，我已经阅读了有关在一个页面中加载超过1000张图片并应用建议的其他问题。这个问题与如何处理滚动超过1000张图像的问题更为相关。

我已经应用了延迟加载并将照片的大小减小到每个约500k。此外，在延迟加载时我使用1px数据URI使请求尽可能轻。

然而，你几乎不能向下滚动，它非常迟钝，感觉就像你在试图播放COD的windows xp sp2上一样。

在下面的PHP片段中，我扫描一个目录并获取所有图像并返回一个数组：

function returnPhotos($path){
    $files = scandir($path);
    $files = array_diff(scandir($path), array('video', '.', '..'));
    $filesInArray = count($files);
    return $files;
}

在这里，我遍历数组并显示图像

<div class="col-md-12" style="text-align:center;">
<?php 
  foreach($photoArray as $photo){
    echo "
      <div style='display:inline-block;position:relative;'>
      <label for='img".$counter."'>
        <img src='data:
image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' data-src='".$path."".$photo."' style='max-height:250px;padding:2px;max-width:370px;min-width:184px;'>
      </label><br/>
    ";
?>
</div>

这是我使用

的jquery延迟加载库

/**
 * jQuery Unveil
 * A very lightweight jQuery plugin to lazy load images
 * http://luis-almeida.github.com/unveil
 *
 * Licensed under the MIT license.
 * Copyright 2013 Luís Almeida
 * https://github.com/luis-almeida
 */

;(function($) {

  $.fn.unveil = function(threshold, callback) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;

    this.one("unveil", function() {
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });

    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this);
        if ($e.is(":hidden")) return;

        var wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();

        return eb >= wt - th && et <= wb + th;
      });

      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }

    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

    unveil();

    return this;

  };

})(window.jQuery || window.Zepto);

我找到了一个网站，它做同样的事情，但它运作得很好，在这里：https://www.youtube.com/watch?v=c0c7aUh33ug

但我的工作非常糟糕，在这里：https://www.youtube.com/watch?v=jRuwzAzaShU

我可以更改哪些内容以使其更好地加载/工作？

Answer 1

这将取决于服务器响应速度和图像大小。你有没有考虑过这两个人来解释差异。

另外，你重新发明了轮子？ lazy-loading.js已经存在。为什么不试试图书馆

Answer 2

正如塞巴斯蒂安·埃斯皮诺萨所说，最大的问题是每张图片都在修改DOM。我从这开始并用Google搜索并发现如果你为每张图片设置IMG元素的确切高度和宽度，他们就可以在一个页面上加载甚至5-7000个图像并且如果你添加了延迟加载这个，效果很好。

现在很明显，在显示之前我必须确定哪些照片是风景照片，哪些照片是肖像照片所以我可以使用适当的scalling来显示它们，但除此之外，我认为它没问题。

因此，这个问题可以关闭，

Answer 3

向您提出一些建议：

压缩你的照片（尽可能缩小你的应用程序）
在当前窗口图片旁边预加载图片（也许您可以在需要显示时预先加载图片，预先移动到正确位置）
删除最旧的元素以释放内存（删除最近不会使用的元素），以便您可以更快更轻松地浏览器

有些话：

英语不是我的母语，如果有些话你无法理解。请跟我说一些

在一页上加载1000张图像

3 个答案: