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
}