Question

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

示例：

HTML

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

CSS

{{1}}

JS

{{1}}

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使用数据 - [x]属性中的数据更改图像标记（根据您的请求修改srcset / sizes而不是src）：

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

Answer 2

您可以在文档上加载图像。使用以下内容：

$(document).ready(function() {
// set images here
});

您需要在文档就绪函数中更新图像的src属性。

推迟img加载到pageload之后？

2 个答案: