在加载图像之前显示网页[关闭]答案

【问题标题】：Display webpage before loading images [closed]在加载图像之前显示网页[关闭]
【发布时间】：2020-03-26 07:46:43
【问题描述】：

我有一个页面上有很多大图，这意味着加载时间很长。

我想先显示没有任何图像的页面，然后一张一张地加载图像。这意味着用户可以在浏览器加载所有内容之前开始使用页面（图像对此并不重要）。

我该怎么做？目前，页面只有在所有图像都加载完毕后才会显示。

感谢您的帮助！

【问题讨论】：

请在发布问题之前做一些适当的研究。如果您进行一些 google 搜索，实际上有数百甚至不是数千个示例、教程和库可以帮助您解决这个问题。对于 SO，这个问题也太不具体和太宽泛了。

标签： javascript php html css image

【解决方案1】：

在源中添加一个透明像素并附加一个特殊的类：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=" data-src="/path/to/real-image.jpg" class="lazy" />

然后在您的正文末尾添加此脚本以将 data-src 交换为 src，以便浏览器加载图像。

<script>
(function loadImages() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i = 0; i < imgDefer.length; i++) {
        if (imgDefer[i].getAttribute('data-src') && imgDefer[i].classList.contains('lazy')) {
            imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
        }
    }
}());
</script>

【讨论】：

请不要明确回答题外话。 OP 显示自己解决问题的尝试为零，而且看起来他们甚至没有做过很多研究。这样做只会让人们不断提出离题的问题，将 SO 变成免费的编码服务。