使用 jQuery 预加载图像

Question

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

编辑：

我创建了一个新的小提琴： http://jsfiddle.net/Z2W7r/ 如果有人可以修改它并添加适当的 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;

}

并像这样调用它：

$(document).ready(function() {

$.preloadCssImages();
});

所以...有人知道为什么这个脚本（或任何脚本）不能只在 Firefox 中工作吗？如果需要，我可以提供该网站的地址。

Answer 1

很旧但有威胁，但问题仍然存在！！
我尝试过不同的脚本来存档此事件（包括此脚本）并调试发生的时间和原因。

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

在 Linux 操作系统 上运行 Firefox 浏览器，并且当您的 CSS 文件中有 <图像的代码>跨域URL。

原因是，HTTP_access_control...但必须对 Linux 进行一些操作 另外..因为即使你尝试
代码中的 Access-Control-Allow- 失败了。

我对此的实际解决方案（不优雅但至少避免了问题）是根据以下条件加载脚本：

<?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>';
?>

Answer 2

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

Answer 3

我猜人们是说图片是使用问题中提到的预加载插件为他们预加载的。

如果有人想提供额外的建议或更简单的预加载脚本，我会洗耳恭听。否则，我会将这个答案作为正确的答案......

为了正确起见，这是我正在谈论的插件：

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;
}

并这样称呼它：

$(document).ready(function() {

$.preloadCssImages();
});

谢谢！
阿米特