Question

我有一系列想要展示的照片。这些照片的文件名从1.jpg到100.jpg，但中间的一些文件丢失了。例如，19.jpg不存在，但是18.jpg和20.jpg。我已经编写了以下代码来循环并显示每个图像，同时尝试跳过那些不存在的图像。我的问题是表现糟糕。在浏览器开始渲染任何内容之前，还有10到30秒的等待时间。有没有一种不同的更有效的方法，我可以在没有大量性能影响的情况下实现同样的目标？

for (i = 1; i <= 100; i++) {
    var src = i + '.jpg';
    if (imageExists(src)) {
        var image = $('<img>').attr('src', src);
        var link = $('<a target="_blank">').attr('href', src);
        var thumbnail = link.append(image);
        thumbnail.appendTo('body');
    }
}   

function imageExists(src){
    var http = new XMLHttpRequest();
    http.open('HEAD', src, false);
    http.send();

    return http.status != 404;
}

Answer 1

我只是隐藏它们，并给它们一个onload处理程序，在加载时取消隐藏它们（或者如果设置了.complete则立即取消它们）。不存在的那些将不会显示。

CSS

.img_link.hidden {
  display: none;
}

JS

var htmlArr = [];
for (i = 1; i <= 100; i++) {
  htmlArr.push(`<a target="_blank" class="img_link hidden"><img src="${i}.jpg"></a>`);
}   

document.body.insertAdjacentHTML("beforeend", htmlArr.join(""));

Array.from(document.body.children)
  .filter(el => el.classList.contains("img_link"))
  .map(el => el.firstChild)
  .forEach(img => 
    img.complete ? loader.call(img) : img.addEventListener("load", loader)
  );

function loader() {
  this.parentNode.classList.remove("hidden");
  this.removeEventListener("load", loader);
}

注意： 以上代码使用ES6语法。下面的演示使用ES5，因此请使用适合您的浏览器支持级别的任何一个。

点击下方查看演示：

var htmlArr = [];
for (i = 1; i <= 10; i++) {
  var host = i%3==0 ? "example" : "dummyimage";
  htmlArr.push('<a target="_blank" class="img_link hidden"><img src="https://' + host + '.com/120/ff0aff/000000&text=' + i + '"></a>');
}   

document.body.insertAdjacentHTML("beforeend", htmlArr.join(""));

[].slice.call(document.body.children)
  .filter(function(el) { return el.classList.contains("img_link") })
  .map(function(el) { return el.firstChild })
  .forEach(function(img) {
    return img.complete ? loader.call(img) : img.addEventListener("load", loader)
  });

function loader() {
  this.parentNode.classList.remove("hidden");
  this.removeEventListener("load", loader);
}

.img_link.hidden {
  display: none;
}

使用jQuery递增图像源并循环显示

1 个答案: