确保按需加载图像

时间:2012-11-07 22:34:40

标签: javascript html css image client-side

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

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

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

1 个答案:

答案 0 :(得分:2)

您可以使用一些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
}