0

在我的网站（就是给宝宝取名字的），每页显示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，只是在它们开始之前取消加载图像，并在页面加载后重试加载。正如我研究的那样，取消图像加载并不能阻止浏览器下载图像，所以这个也失败了。

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

你有什么建议让它既对搜索引擎友好，又在页面完成后加载图像？

4

1 回答 1

4

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

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

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

于 2013-11-03T21:04:06.333 回答