我有一个网页,每隔几秒自动重新加载一次,并显示不同的随机图像.但是,当它重新加载时,会有一秒钟的空白页面,然后图像会慢慢加载.我想继续显示原始页面,直到下一页加载到浏览器的内存中,然后一次显示所有内容,使其看起来像一个无缝的幻灯片.有没有办法做到这一点?
是唯一改变形象的东西?如果是这样的话,为jQuery使用类似循环插件的东西可能更有效,而不是重新加载整个页面.
http://malsup.com/jquery/cycle/
如果您使用jQuery,这是JS所需的 -
说这是你的HTML:
这将是所需的jQuery:
$(function(){ $('div.pics').cycle(); });
无需担心不同的浏览器 - 完全跨浏览器兼容性.
如果您只是更改图像,那么我建议您根本不重新加载页面,并使用一些javascript来更改图像.这可能是jquery循环插件为您做的.
无论如何,这是一个简单的例子
这会每5秒更改一次图像源.不幸的是,浏览器会逐步下载图像,因此在下载新图像时,您将获得"闪烁"(或者可能是空格)几秒钟.
要解决这个问题,您可以"预加载"图像.这是通过创建未在屏幕上显示的新临时图像来完成的.加载图像后,将实际图像设置为与"预加载"相同的源,因此浏览器会将图像从其缓存中拉出,并立即显示.你这样做:
这很复杂,但我会把它作为练习留给读者将所有部分放在一起(并希望说"AHA!"):-)