确保按需加载图像

Question

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

<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
}