使用jQuery預加載圖像

Question

我知道這是一個熱門話題，而且我以前也曾有過相同標題的問題，但是我嘗試了所有嘗試，但有些工作不正常。 由於某些原因，我的Firefox無法預加載圖像。 圖像確實在IE7 / 8和Chrome中預加載（應預加載）。 但不是在Firefox中。

編輯：

我創建了一個新的Fiddle： 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個條件時，腳本才會失敗：

在Linux OS上運行Firefox browser ，並且在CSS文件中包含圖像時，請使用cross domain 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();
});

謝謝！ 阿米特