时间戳

首页 > 解决方案 > 在加载图像之前显示网页

javascript - 在加载图像之前显示网页

问题描述

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

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

我怎样才能做到这一点？目前，页面只有在所有图像都加载完毕后才会显示。

谢谢你的帮助！

标签： javascriptphphtmlcssimage

解决方案

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

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

推荐阅读