【问题标题】:Javascript preloader doesn't load properly in FirefoxJavascript 预加载器无法在 Firefox 中正确加载
【发布时间】:2011-11-18 11:38:52
【问题描述】:

我有一个页面,其中预加载了多个图像,因此使用 Javascript 更改图像不会有任何加载时间或闪烁。为此,我有一个 Javascript 预加载器。它在 Opera、Safari、Chrome 和 Explorer 中运行良好,一旦加载页面,您就可以更改图像而无需任何闪烁或加载时间。然而,在 Firefox 中,它似乎可以正常工作,但每个图像之间都有闪烁。当它们都经过一次时,再次经过它们时,每个图像之间的闪烁就会消失。我将此解释为预加载器未将图像正确加载到 Firefox 的缓存中。我单独的预加载脚本如下所示:

<!--
function loadImages()
{
if(document.images)
{
    for(i=0; i<imageArray.length; i++)
    {
        var toLoad = new Image();
        toLoad.src = imageArray[i];
    }
}
} 
-->

这是从文档的 head 部分加载的,首先是对外部脚本的引用,然后是一个将 upp 图像添加到数组中的函数,最后通过函数 loadImages() 调用。

你可以在这里看到它:http://www.siroccomosaique.se/SLUTTEST/galleri_.cls

如果您使用 Firefox,当您第一次滚动浏览图片时,您会看到图片之间的闪烁非常短暂。

【问题讨论】:

    标签: javascript image firefox preloader


    【解决方案1】:

    您删除了对新图像的引用,因此它们会在加载完成之前被垃圾收集。而是将它们放在一个数组中?

    【讨论】:

    • 您的意思是在加载脚本中使用相同的变量,还是在页面上的代码中使用相同的变量...我想我不明白 :) 另外,奇怪的是它完美地工作当我对较小的图像使用相同的脚本时,即使是 Firefox 也可以滚动浏览它们而不会闪烁......
    • @fast-reflexes 现在您创建每个图像,将其存储在局部变量中,然后开始加载。但是当 loadImages() 返回时 toLoad 超出范围,并且没有什么东西可以让这些图像在那个时候被垃圾收集。如果图像很大,它们将不适合浏览器的图像缓存,并且一旦 HTMLImageElements 被 GCed 就会被驱逐。因此,您要做的是创建一个全局数组并将您的 HTMLImageElements 存储在其中。
    • 好的,很抱歉没有达到更高的水平,但您的意思是通过将图像放入包含图像类型的数组中,并按照我现在的方式预加载它们可以解决问题吗?基本上这样就可以像现在一样工作,但是在显示之前不会收集垃圾?如果我做对了,我还能将它们存储为 Image 类型还是必须将它们存储为 HTMLImageElements (我真的不知道什么时候使用这种类型,但我想如果我需要的话,我可以调查一下出于某种原因使用)。非常感谢您的帮助!
    • 啊,我想我明白了,实际的图像必须在一个全局数组中,我会尝试并返回,谢谢!
    • 好的,我创建了一个全局数组列表,我在循环中每次将 toLoad 持有的图像推送到该列表,但它并没有消除图像之间的闪烁:(使用数组还是数组列表一样好?现在我有两个全局数组列表,一个保存图像的 url,一个保存实际的 Image 对象......我做错了什么吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多