加载网页后加载网页图像

Question

在我的网站(即婴儿的名字)，40个名字显示在每一页，每个名字可以有一个图片，由用户上传。现在有图片的名字增加了，我的页面速度非常慢。顺便说一下，图像是从CDN加载的，我只关心客户端页面加载时间。

首先，我决定将1x1空的gif映像作为src，并在页面加载完成后加载实际图像。

<img src="x.gif" data-src="the-real-image-src.jpg" class="delayed-load" /> 

$(window).load(function () {
    $('.delayed-load').each(function(){
          $(this).attr('src',$(this).data('src'));
    });
});

但是后来我想，当图片被搜索引擎索引的时候，它会对它产生不好的影响。因此，我决定不更改真正的srcs，只需在图像开始之前取消加载，并在加载页面后重新尝试加载。正如我所研究的，取消图像加载并不阻止浏览器下载te图像，所以这个也失败了。

我也可以在页面加载后添加图片，但它与第一选择有相同的问题(该页面源不包含真实的图像链接)。

你有什么建议，既保持搜索引擎友好，也加载图片后，页面完成？

Answer 1

将width="<value>"和height="<value>"添加到img标记中(以像素为单位)。这将允许页面文本内容在图像完全加载之前呈现。不需要javascript。

<img src="x.gif" width="42" height="60" data-src="the-real-image-src.jpg" />

请注意，我假设您对每个图像具有相同的宽度和高度，或者您已经将度量存储在可以在此负载上访问它的某个地方。