Question

在互联网上阅读了许多“使用javascript预加载图片”标题后，我找到了相同的解决方案。这是一个使用“stuff.jpg”名称预加载图像的简单示例代码：

 <script>
    var img = new Image();
    img.src = "stuff.jpg"
 </script>

但是我发现没有消息来源告诉我在定义它时“src”属性实际上是什么（例如img.src =“stuff.jpg”）。我的想法是，它只是将“src”属性设置为img by a string（即“stuff.jpg”）并且尚未加载真实图像。但我对我的想法相当不情愿，因为如果它是对的，那么上面的代码将毫无价值。你能告诉我src在上面的代码中实际做了什么吗？如果你能给我一个解释你的来源，那将会很棒。谢谢。

Answer 1

是的，您的代码实际上会加载图片。设置图像对象的src会加载图像，现在您只需要将img添加到DOM中。

类似的东西：

var div = document.getElementById('theImg');
div.appendChild(img);

当然这样做没有任何结果，但如果要显示图像以响应某些事件，点击按钮或其他内容，那么您实际上预先加载了图像。

您可以通过在Chrome中执行代码并查看开发人员工具中的网络标签来查看该图片，并查看该图片是否实际是从服务器请求的，即使您没有将其添加到DOM

使用src属性预加载图像

1 个答案: