Firefox中的预加载图像不会从相同页面加载的缓存中检索 [英] Preloading images in Firefox aren't being retrieved from the cache on the same page load
问题描述
在第一页加载时预加载图像不会阻止浏览器从再次加载来自原始源的图像而不是缓存。奇怪的是，刷新页面将成功地使图像从缓存中加载。
运行在页面加载的JavaScript会获取所有的图像URL，并尝试通过调用（new Image（））来预加载。src ='http：// ...';为每一个。
检查页面加载显示，图像将加载在页面加载，但是当幻灯片显示时，图像也将被加载。
测试图片链接（SO声望限制）： http://i.stack.imgur.com/E9KLM.png
在图片中，图片-66.png，-21。 png，-63.png和-83.png是从JavaScript预装的，但当滑块显示幻灯片时再次请求。
另外奇怪的是底部图像看起来像是在页面创建之后排队加载的。也许这是因为这比文件准备好后加载的脚本优先？
最后，如果我要刷新页面并跳转到幻灯片被预加载的图像，但从来没有透露，它显示从缓存加载，就像它原本应该。
我的理论是，原来的背景图像是可能声明为需要在页面首次加载时从服务器加载，但实际上并没有加载，直到幻灯片显示。在文档准备好的时候，当JavaScript预加载图像时，它们还没有被缓存，所以需要从服务器加载。然后显示一个幻灯片，浏览器告诉那个图像，它需要像最初声明的那样加载。
有谁知道为什么会出现这种情况？如果是这样，是否有任何解决方案来解决？
我有一个想法，涉及添加图像URL作为data-url属性，然后让JavaScript预加载和添加它们作为背景图像，但我还没有测试过。
对于那些感兴趣的，我们没有能够找到一个完美的解决方案。
然而，我们注意到，图像被再次根据其大小拉。图像尺寸越大，图像显示给用户的图像越不可能从缓存中获取。
我们通过压缩图像来半解决这个问题背景图像更进一步，然后大大限制了第一个页面加载预加载的图像数量。我们发现这两个步骤大大增加了在需要时通过缓存拉入图像的变化。它还节省了更多的带宽，并大大提高了页面加载的时间。显着的数额。
Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.
这篇关于Firefox中的预加载图像不会从相同页面加载的缓存中检索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
