javascript - 将图像加载推迟到页面加载之后？

Question

我想知道是否有任何标准可以延迟所有加载，然后以编程方式稍后调用它们？有兴趣做类似 Facebook 的事情，其中​​将极小的模糊 jpeg 设置为背景图像，然后在页面加载时调用完整的 res 图像。

例子:

HTML

<img class='load-later' src='example.com/image.jpg'>

CSS

img.load-later {
    background-image: url('blurry-preview.jpg');
}

JS

function pageLoad() {
    $('.load-later').load();
}

Answer 1

首先将src 属性设置为“blurry-preview.jpg”图像，稍后将其更改为实际图像src。愚蠢简单的例子(使用 JQuery):

<img src="blurry-preview.jpg" alt="something" class="imgo" />

 $(document).ready(function () {
    $('.imgo').attr('src', 'goodlooking-image.jpg');
 });

如果您使用带有 data-[x] 属性的 img 标签来保存您希望稍后应用的 src(或其他属性)，这将更有意义。这是一个修改“srcset”和“size”而不是 src 的例子:

<img src="blurry-preview.jpg" alt="something" class="imgo" data-srcset="m.jpg 300w, l.jpg 600w" data-sizes="(max-width: 500px) 100vw, (max-width: 1000px) 33vw, 600px" />

Javascript 使用其 data-[x] 属性中的数据更改图像标签(根据您的要求修改 srcset/sizes 而不是 src):

$(document).ready(function () {
    $('.imgo').each(function () {
        $this = $(this)
        $this.attr('srcset', $this.data('srcset'));
        $this.attr('sizes', $this.data('sizes'));
    });
});