javascript - 在一页上加载 1000 张图片

Question

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

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

但是，您几乎无法向下滚动，它非常卡顿，感觉就像您在 windows xp sp2 上尝试玩 COD。

在下面的 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

正如 Sebastián Espinosa 所说，最大的问题是每张图片的 DOM 都在修改。我从这里开始并四处搜索，发现如果您为每张图片设置 IMG 元素的确切高度和宽度，即使在一页上加载 5-7000 张图片，如果您将延迟加载添加到这个，效果还不错。

现在很明显，我必须在显示照片之前确定哪些照片是横向的，哪些是纵向的，这样我才能使用适当的缩放来显示它们，但除此之外，我认为没问题。

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