Question

我正在尝试编写图像预览器。页面加载后处理图像，然后我将每个“鼠标悬停”功能添加到预览器中。

我在获取图片大小方面遇到了问题，并在HERE

中获得了解决方案

我不是javascript的新手，但还不够先进，无法理解：在上面引用的解决方案中，“getMeta”函数中创建的“img”对象会发生什么？是否会在处理“mouseover”事件后将其删除，否则它将一直停留在内存中直到页面关闭？如果它停留，有没有办法处理它们？

由于可能会有一百个这样的图像链接，我希望在将它们全部悬停后防止出现任何内存问题。

编辑：“getMeta”功能

function getMeta(imageSrc,callback) {
   var img = new Image();
   img.src = imageSrc;
   img.onload = function() { callback(this.width, this.height); }
}

Answer 1

除非对该对象的任何引用在javascript运行时中保持活动状态，否则计划删除对象。

在这种情况下，＆＃34;图像＆＃34;本身，以及在里面制作的所有引用都被标记为在＆＃34; getMeta＆＃34;结束。删除不是立即的，将在稍后由浏览器进行垃圾收集。在浏览器关闭之前，唯一剩下的就是在进程中下载的图片文件保存在缓存中。

请参阅有关MDN上javascript垃圾回收的"memory management"文章。

但是，我建议在这种情况下缓存图像详细信息，因为每次鼠标悬停调用Image时都会创建一个新的getMeta对象。查询本地缓存以获取与鼠标悬停操作相关的详细信息的速度更快 - Map可能是缓存的高性能javascript实现，但是对于这种情况，可以使用简单的Object就足够了。

要做到这一点：

创建图片维度字典，这是您的缓存
，检查图像尺寸是否在缓存字典中
- 如果是，请使用缓存中的维度
- 如果不是，请创建新的Image对象，并将维度记录到缓存

这样，当鼠标一遍又一遍地悬停在同一图像上时，您不会创建更多Image个实例 - 相反，您只是从缓存字典中检索相同的维度，而不是第一次。

然后，只有第一次调用getMeta实际上会实例Image并启动网络请求 - 其余的被缓存

在javascript函数中创建的对象/元素会发生什么？

1 个答案: