Javascript 使用jQuery预加载图像

我知道这是一个热门话题，我知道以前也有同样标题的问题，但我尝试了所有的方法，但有些方法不太管用。由于某些原因，我的Firefox不会预加载图像。图像在IE7/8和Chrome中预加载（正如它们应该的那样）。但不是在Firefox中

编辑：

我创造了一把新小提琴： 如果有人可以修改它并添加适当的jQuery或Javascript代码来进行图像预加载，我将非常感激

---

我甚至使用了以下插件：

jQuery.preloadCssImages = function(){
    var allImgs = [];//new array for all the image urls 
    var k = 0; //iterator for adding images
    var sheets = document.styleSheets;//array of stylesheets

    for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
            var cssPile = '';//create large string of all css rules in sheet
            var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
            var baseURLarr = csshref.split('/');//split href at / to make array
            baseURLarr.pop();//remove file path from baseURL array
            var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
            if(baseURL!="") baseURL+='/'; //tack on a / if needed
            if(document.styleSheets[i].cssRules){//w3
                    var thisSheetRules = document.styleSheets[i].cssRules; //w3
                    for(var j = 0; j<thisSheetRules.length; j++){
                            cssPile+= thisSheetRules[j].cssText;
                    }
            }
            else {
                    cssPile+= document.styleSheets[i].cssText;
            }

            //parse cssPile for image urls and load them into the DOM
            var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
            if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
                    var arr = jQuery.makeArray(imgUrls);//create array from regex obj       
                    jQuery(arr).each(function(){
                            allImgs[k] = new Image(); //new img obj
                            allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;     //set src either absolute or rel to css dir
                            k++;
                    });
            }
    }//loop
    return allImgs;

---

那么…有没有人知道为什么这个脚本（或者其他相关的脚本）不能只在Firefox中工作？如果需要，我可以提供该站点的地址。

这可能是因为您在本地使用它，FF访问本地CSS文件时存在安全问题。尝试将项目上载到web服务器或启动本地apache，看看问题是否仍然存在。

我想人们会说图片正在使用问题中提到的预加载插件为他们预加载

如果有人想提供额外的建议或更简单的预加载脚本，我洗耳恭听。否则，我会做出正确的回答

为了正确起见，这里是我所说的插件：

jQuery.preloadCssImages = function(){
var allImgs = [];//new array for all the image urls 
var k = 0; //iterator for adding images
var sheets = document.styleSheets;//array of stylesheets

for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
        var cssPile = '';//create large string of all css rules in sheet
        var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
        var baseURLarr = csshref.split('/');//split href at / to make array
        baseURLarr.pop();//remove file path from baseURL array
        var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
        if(baseURL!="") baseURL+='/'; //tack on a / if needed
        if(document.styleSheets[i].cssRules){//w3
                var thisSheetRules = document.styleSheets[i].cssRules; //w3
                for(var j = 0; j<thisSheetRules.length; j++){
                        cssPile+= thisSheetRules[j].cssText;
                }
        }
        else {
                cssPile+= document.styleSheets[i].cssText;
        }

        //parse cssPile for image urls and load them into the DOM
        var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
        if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
                var arr = jQuery.makeArray(imgUrls);//create array from regex obj       
                jQuery(arr).each(function(){
                        allImgs[k] = new Image(); //new img obj
                        allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;     //set src either absolute or rel to css dir
                        k++;
                });
        }
}//loop
return allImgs;
}

谢谢！

---

阿米特

非常老，但威胁很大，但问题是它仍然存在
我尝试了不同的脚本来归档这个（包括这个），并调试它发生的时间和原因

我发现脚本只有在这3个条件都满足时才会失败 罐：

在

Linux操作系统上运行
Firefox浏览器
，当您的CSS文件中有图像时，
跨域URL
。
原因是。。。但也必须对
Linux
做些什么。。因为即使你试着
访问控制允许-
在代码中，它失败了

我对此的实际解决方案（不是很优雅，但至少可以避免这个问题）是基于以下条件加载脚本：

<?PHP
    $ua = $_SERVER["HTTP_USER_AGENT"];
    $firefox = strpos( $ua, 'Firefox') ? true : false ;
    $ubuntu = strpos( $ua, 'Ubuntu') ? true : false ;
    if ( !$firefox && !$ubuntu )echo '<script type="text/javascript" src="js/preloadcssimg.js"></script>';
?>


我在服务器上使用它。您可以在本地判断预加载的图像，因为下载它们不需要任何时间。该网站位于此处：。很抱歉，这个网站是用希伯来语写的。但这不应该是个问题，因为关注的问题是图像预加载，而与语言无关。如果将鼠标放在任何顶部链接上（共有10个），则应预加载图像，但不会：（@Amit-该页面上的图像预加载对我在Windows7 64位Firefox 3.6.6中的工作很好。很有趣。那一定是我的Firefox设置。谢谢！你真的要恢复该线程吗？你知道，它已经超过3年了。你想要什么？…打开一个新的，知道已经存在一个相同主题的线程？不是吗兴而不提供某种解决方案？将其从谷歌搜索中删除？我认为如果内容仍然可用，并且在搜索时出现，并且您可以改进或更新信息，是的，我
真的必须恢复此线程，即使它已经3年了。（编辑顺便说一句：我不是在寻找一个
接受的答案
，我只是想更新和改进信息。）
$(document).ready(function() {

$.preloadCssImages();
});

<?PHP
    $ua = $_SERVER["HTTP_USER_AGENT"];
    $firefox = strpos( $ua, 'Firefox') ? true : false ;
    $ubuntu = strpos( $ua, 'Ubuntu') ? true : false ;
    if ( !$firefox && !$ubuntu )echo '<script type="text/javascript" src="js/preloadcssimg.js"></script>';
?>