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';
}

我有点困惑哪一个更好的方法？在一些例子中，我在网上发现他们使用第一种方法，但我发现第二种方法非常简单。第二种方法是否有任何缺点？

Answer 1

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

如果多个img代码指向相同的图片，例如显示订单项的删除图标，则可以将Img变量用于其他图片。

从可用性的角度来看，

第二种方法更好。

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

此外，使用第二种方法，您可以在调用onload事件时淡入或上移图像，这是第一种方法无法做到的。

Answer 2

首先采取行动。

在第一种方法中，最初没有定义图像源并且稍后定义图像源，这使得它成为加载多个图像的好方法，从而可以首先快速地渲染文档的其他部分。这是由滚动事件触发的延迟加载插件使用的类似方法。如果你没有，这是一个很好的做法。要加载到网页上的图像。

但它有一个缺点，你的图像不会对搜索引擎优化友好，并且将无法通过W3C标准测试，因为在没有img源的情况下，网络机器人将无法抓取您的图像。

第二种方法正在显示已加载的图像，这在文档加载速度方面比第一种方法慢。 Js在这里玩css，通常用于动画图像显示。

与第一种方法不同，图像是SEO友好的，因为它们可以被网络蜘蛛抓取并编入索引。

加载后显示图像的最佳方法

2 个答案: