Question

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

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

我该怎么做？目前，仅在加载所有图像后才显示该页面。

感谢您的帮助！

Answer 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>

加载图像前显示网页

1 个答案: