javascript - 确保按需加载图像

Question

我用 PHP 编写了一个支持验证码图像重新加载的验证码图像验证。在重新加载期间，脚本会显示加载等待动画图像。使用慢速互联网连接会导致显示该图像的延迟。我通过在验证码脚本的第一个客户端脚本中插入此图像作为隐藏图像来解决此问题，以确保在使用重新加载功能之前将其加载到客户端的缓存中：

<img src="captcha_loading.gif" style="display:none" />

我的问题是，这是解决延迟问题的更好方法吗？还是有另一种更好的方法？

Answer 1

您可以使用一些 javascript 来强制将图形加载到内存（缓存）中，而无需在页面上有单独的元素：

Image capchaImage = new Image();
capchaImage.src = "/path/to/captcha_loading.gif";
capchaImage.onload = function(){
    ///Do something when image is done loading
    document.getElementById('capcha').src = capchaImage.src;
    document.getElementById('capcha').style.display = 'block'; // or inherit
}