加载图像...时间吃完了

Question

这里是一个相同的代码，我想知道什么时候浏览器真正加载图像

将图像路径分配给类似

的数组时

imageNames[0] = 'image1.jpg';

或当你做

myImage = new Image();
myImage.src = imageNames[0];

我已经放了一些计时器..但没有得到结论！帮助

Answer 1

你会看load事件。根据您的浏览器支持要求，将其与古老的onload或addEventListener() / attachEvent()相关联。

myImage = new Image;

myImage.onload = function() {
   alert('Image loaded');
}

myImage.src = imageNames[0];

jsFiddle

您还可以通过检查complete属性来检查图像是否已加载。

Answer 2

需要注意的关键是，仅仅因为人类可以看到可能是资源标识符/定位符，计算机就不能。

将字符串分配给数组中的某个点时：

imageNames[0] = 'image1.jpg';

'image1.jpg'是your.host.net上图像的合法路径这一事实不是浏览器可以自行确定的 - 浏览器不能识别字符串{ {1}}是资源表示而不是资源本身。

将DOM图像的'image1.jpg'属性设置为字符串src后，浏览器可以识别该字符串应被视为资源标识符（因为DOM元素是created是一个图像，图像的'image1.jpg'属性应该是指向可以访问和下载的图像资源的URI，浏览器将尝试通过它自己的方式获取该资源。

Answer 3

当您将网址分配给src元素的img属性时，浏览器会下载图片。在浏览器的控制台中尝试此操作，然后观看网络选项卡：

var img = document.createElement('img');
img.src = 'foo';

第二行执行后，您将立即看到网络活动。

它肯定对imageNames[0] = 'image1.jpg';没有任何作用，因为数组中的字符串可能是任何东西，浏览器无法知道它应该是图像的URL。