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，只是在它们启动之前取消加载图像并在页面加载后重试加载。因为我研究取消图像加载并不会阻止浏览器下载图像，所以这个也失败了。

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

你会建议保持搜索引擎友好并在页面完成后加载图片吗？

Answer 1

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

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

请注意，我假设您为每个图片设置了相同的宽度和高度，或者您已将该指标存储在可以在此负载上访问它的位置。

加载页面后加载网页图像

1 个答案: