Question

如果你有，比如img标签中的3MB图像，则需要几秒钟才能加载。当图像加载时，浏览器就像打印一样＆＃34;它 - 它首先显示顶部，然后显示中间然后显示底部。我该如何防止这种情况发生？我宁愿将图像隐藏起来，在显示第二个或第二个图像后 - 当它完全加载时。

Answer 1

一种方法是给他们一个给他们opacity: 0的课程，这样他们就不会显示：

<img src="/path/to/image" class="loading">

在CSS中：

.loading {
    opacity: 0;
}

在head中，如果禁用JavaScript，我们会覆盖它（因此我们对非JavaScript访问者不友好）：

<noscript>
<style>
.loading {
    opacity: 1;
}
</style>
</noscript>

...然后在页面底部的代码中找到所有图片，并在加载时删除课程，并...（请参阅评论）：

(function() {
    // Get an array of the images
    var images = Array.prototype.slice.call(document.querySelectorAll("img.loading"));
    // Hook their load and error events, even though they may have already fired
    images.forEach(function(image) {
        image.addEventListener("load", imageDone.bind(null, image));
        image.addEventListener("error", imageDone.bind(null, image)); // Could handle errors differently
    });
    // Check to see if any images are already complete
    checkImages();

    function imageDone(img) {
        img.classList.loading("remove");
        images = images.filter(function(entry) { entry != img });
    }
    function checkImages() {
        images.forEach(function(image) {
            if (image.complete) {
                imageDone(image);
            }
        });
        if (images.length) {
            // Check back in a second
            setTimeout(checkImages, 1000);
        }
    }
})();

这是一种腰带和牙套的方法。它会主动检查图像是否已完成加载，并反应性地处理图像的load和error事件。理论上，我们不应该需要setTimeout，你可以在没有它的情况下进行测试，但是......

请注意，一旦图片完成，我们会移除该类以使其可见。

Answer 2

旧学校：

要避免在渲染时部分显示图像，请将大图像保存为渐进式，而不是基线 jpgs。

a 渐进式 jpg渲染为一系列质量越来越高的扫描

a 基线 jpg从上到下呈现（您所谓的“打印”）。

渐进式选项被认为比图像的突然出现或从上到下的慢速渲染您不喜欢用户友好。渐进式文件变体甚至可以小于其基线对应文件。

有关此阅读的详情：The Return of the Progressive JPEG。

Answer 3

我认为这里的每个人都给了你一些很好的答案，我只是想加入.3MB对于网络图像来说相当大。不要使用大的东西来制作用于徽标或布局的图像。如果你要加载的东西是一个很好的，大尺寸的现实生活中的图像，你想要保持质量（或者提供下载到高质量的图形），你应该坚持使用更大量的像素数据东西）。除此之外，如果你进行谷歌搜索，你会发现大量的加载图像的解决方案。我会用于更大图像的一个很好的东西是jQuery / ajax解决方案。

如何防止部分加载的图像显示？

3 个答案: