加载完图片后展示的最佳实践方法

Question

目前看来，加载图片后我们有两种展示方式。

第一种方法

<img id="myImage" />

var img = new Image(),
    x = document.getElementById("myImage");

img.onload = function() {
   x.src = img.src;
};

img.src = "http://somedomain/image.jpg";

第二种方法

<img id="myImage" src="http://somedomain/image.jpg" style="display:none" onload="showImage();" />

function showImage() {
  document.getElementById("myImage").style.display = 'block';
}

我有点困惑哪种方法更好？在一些在线例子中，他们使用第一种方法，但我认为第二种方法非常简单。第二种方法存在任何缺点吗？

- VJAI

---

首先使用一些“加载中...”图像，当实际图像加载完毕后再进行替换。 - Tushar

如果您只考虑一张图片，第一个选项就可以了。对于多张图片，第二个选项更合适。但就性能而言，我怀疑两种方法都使用了onload事件，没有任何区别。另外，像Tushar建议的那样，使用预加载器(CSS/轻量级GIF)可以提供更好的用户体验。 - Rayon

另一种方法是使用 data-src 属性来保存图像的 src。循环遍历所有图像，并在图像加载时设置 src。 - Rayon

Answer 1

第一种方法从代码可重用性的角度来看更好。

如果多个Img标签将指向相同的图像（例如，为行项目显示删除图标），则可以将img变量用于其他图像。

第二种方法从可用性的角度来看更好。

您可以显示不同的（已经可用的）图像，例如加载或默认用户头像，直到实际下载并可用该图像。

此外，使用第二种方法，当onload事件被调用时，您可以淡入或滑动图像，而这是第一种方法所无法做到的。

- gurvinder372

---

只有使用第一种方法才能显示加载图像，对吧？我们不希望在加载图像时触发onload事件。 - VJAI

@Mark 您可以默认隐藏图像并显示加载图像。当实际图像 onload 被调用时，显示相同并隐藏“加载”图像。因此，是的，只需使用第二种方法即可完成。 - gurvinder372

@Mark 对于“加载”图像的Onload事件不应该有影响，因为这种方法只用于获取内容图像（而不是应用程序图像，如删除或箭头图标）。此外，通过使用站点清单（应用程序缓存），您可以预取那些不是内容的图像。 - gurvinder372

Answer 2

首先解决第一个问题。

在第一个方法中，最初没有定义图像源，并且稍后才进行定义，这使得它成为加载多个图像的良好方法，以便文档的其他部分可以首先快速呈现。 这是由滚动事件触发的懒加载插件使用的类似方法。 当您需要在网页上加载多个图像时，这是一种很好的做法。

但它也有一个缺点，您的图像将不符合SEO标准，并且无法通过W3C标准测试，因为网络机器人将无法在img源不存在的情况下抓取您的图像。

第二个方法是显示已加载的图像，这是相对于第一个方法而言，文档加载速度较慢的过程。 Js在此处用于处理css，通常用于动画显示图像。

与第一个方法不同，图像是SEO友好的，因为它们可以被网络蜘蛛爬行和索引。

- Arun Sharma