1

私はこれがホットなトピックであることを知っており、同じタイトルの以前の質問があったことを知っていますが、私はすべてを試しましたが、何かが正しく機能していません。何らかの理由で、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だけで機能しない理由を知っていますか？リクエストがあれば、サイトのアドレスを提供できます。

4

3 に答える 3

2

非常に古いが脅威だが、問題はまだ生きている!!
これ（これを含む）をアーカイブし、いつ、なぜそれが起こったのかをデバッグするために、さまざまなスクリプトを試しました。

このスクリプトは、次の 3 つの条件がポットにある場合にのみ失敗することがわかりました。

を実行しFirefox browser、Linux OSCSS ファイルにある場合は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>';
?>
于 2013-08-09T13:12:36.727 に答える
1

これはおそらくローカルで使用しているためです。FFにはローカルCSSファイルへのアクセスにセキュリティ上の問題があります。プロジェクトをWebサーバーにアップロードするか、ローカルApacheを起動して、問題が解決するかどうかを確認してください。

于 2010-08-06T20:53:10.957 に答える
0

質問で述べたプリロードプラグインを使用して、写真がプリロードされていると言われていると思います。

誰かが追加のアドバイスやより簡単なプリロードスクリプトを提供したいのであれば、私はすべての耳です。そうでなければ、私はこの答えを正しいものとして作ります...

そして、正確を期すために、これが私が話しているプラ​​グインです：

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

ありがとう！アミット

于 2010-08-07T14:53:22.157 に答える