Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/406.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在Firefox中预加载图像不是';正在同一页面加载上从缓存中检索t_Javascript_Css_Image_Firefox_Preload - Fatal编程技术网

Javascript 在Firefox中预加载图像不是';正在同一页面加载上从缓存中检索t

Javascript 在Firefox中预加载图像不是';正在同一页面加载上从缓存中检索t,javascript,css,image,firefox,preload,Javascript,Css,Image,Firefox,Preload,在某些情况下,我在网站主页上运行一个脚本,以便在计时器上交换背景图像。我们决定最好尝试预加载图像,这会在Firefox中引发以下问题: 在第一页加载时预加载图像不会阻止浏览器从原始源而不是缓存再次加载图像。奇怪的是,刷新页面将成功地从缓存加载图像 在页面加载上运行的JavaScript获取所有图像URL,并尝试通过调用(new image())来预加载它们。src='http://…';每一个 检查页面加载显示图像将在页面加载时加载,但在幻灯片显示时图像也将再次加载 测试图像链接(因此声誉限制)

在某些情况下,我在网站主页上运行一个脚本,以便在计时器上交换背景图像。我们决定最好尝试预加载图像,这会在Firefox中引发以下问题:

在第一页加载时预加载图像不会阻止浏览器从原始源而不是缓存再次加载图像。奇怪的是,刷新页面将成功地从缓存加载图像

在页面加载上运行的JavaScript获取所有图像URL,并尝试通过调用
(new image())来预加载它们。src='http://…'
;每一个

检查页面加载显示图像将在页面加载时加载,但在幻灯片显示时图像也将再次加载

测试图像链接(因此声誉限制):

在图像中,图像-66.png、-21.png、-63.png和-83.png是从JavaScript中预加载的,但是当滑块显示该幻灯片时,会再次请求这些图像

另一个奇怪的是,底部的图像看起来像是在页面创建后排队等待加载的。可能是因为它优先于文档准备好后加载的脚本

最后,如果我要刷新页面并跳转到一张预加载了图像但从未显示的幻灯片,它将显示为从缓存中加载,就像最初应该加载的一样

我的理论是,当页面第一次加载时,原始背景图像可能会声明需要从服务器加载,但直到幻灯片显示时才真正加载。在documentready上,当javascript预加载图像时,它们还没有被缓存,因此需要从服务器加载。然后显示一张幻灯片,浏览器告诉该图像它需要按照最初声明的方式加载

有人知道为什么会出现这种情况吗?如果是,有什么解决办法吗


我有一个想法,将图像url添加为数据url属性,然后让javascript预加载它们并将它们添加为背景图像,但我还没有对此进行测试。

对于那些感兴趣的人,我们无法找到一个完美的解决方案

然而,我们确实注意到,这些图像是根据它们的大小再次被提取的。图像大小越大,向用户显示图像时,图像不从缓存中获取的可能性越大


我们通过进一步压缩背景图像,然后大大限制第一页加载时预加载的图像量,半解决了这个问题。我们发现,这两个步骤大大增加了在需要时通过缓存拉入的图像的更改。它还节省了更多的带宽,大大缩短了页面加载时间。

如果不访问页面,很难说会发生什么。调试步骤可能包括:1)更改缓存头,2)使用调试代理验证Firebug是否对您诚实,3)确保未设置Firebug“禁用缓存”,4)查看多个js启动的加载是否也不会导致缓存丢失。