Предварительная загрузка изображений с помощью jQuery

Я знаю, что это горячая тема, и я знаю, что были и предыдущие вопросы с одинаковыми названиями, но я перепробовал все, и что-то просто не работает. По какой-то причине мой 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? Если потребуется, я могу предоставить адрес сайта.


person Amit    schedule 06.08.2010    source источник


Ответы (3)


Очень старый, но опасный, но проблема в том, что он все еще жив !!
Я пробовал использовать другой сценарий, чтобы заархивировать это (включая этот) и отладить, когда и почему это произошло.

Я обнаружил, что сценарий не работает ТОЛЬКО, когда в банке есть три следующих условия:

Запуск Firefox browser, на Linux OS и когда у вас есть в ваших файлах 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>';
?>
person gmo    schedule 09.08.2013
comment
Неужели надо было оживлять эту ветку? Знаете, ему больше 3-х лет. - person ; 09.08.2013
comment
И что вы хотите? ... открыть новый, зная, что уже существует, с тем же предметом? Ничего не делать и не предлагать какое-то решение? удалить его из поиска гугл? Я думаю, что если контент все еще доступен и появляется при поиске, и вы можете улучшить или обновить информацию, да, я really have to revive this thread, даже если ему 3 года. (отредактируйте BTW: мне не нужно accepted answer, я просто хочу обновить и улучшить информацию.) - person gmo; 10.08.2013

Вероятно, это связано с тем, что вы используете его локально, у FF есть проблема безопасности при доступе к локальным файлам CSS. Попробуйте загрузить проект на веб-сервер или запустить локальный apache и посмотреть, сохраняется ли проблема.

person David Hellsing    schedule 06.08.2010
comment
Я использовал его на сервере. Вы можете судить о предварительно загруженных изображениях локально, поскольку их загрузка не занимает много времени. - person Amit; 07.08.2010
comment
Сайт находится здесь: engineeringcreativity.com/samples/dafdefet. Приношу свои извинения, но сайт на иврите. Это не должно быть проблемой, потому что проблема заключается в предварительной загрузке изображения, а не в языковом отношении. Если вы наведете указатель мыши на любую из верхних ссылок (их 10), изображение должно быть предварительно загружено, но его нет :( - person Amit; 07.08.2010
comment
@Amit - Предварительная загрузка изображения на этой странице у меня отлично работает в Firefox 3.6.6 на 64-разрядной версии Windows 7. - person Ben Blank; 07.08.2010
comment
Интересно. Значит, это должно быть что-то с моими настройками Firefox. Спасибо! - person Amit; 07.08.2010

Я предполагаю, что люди говорят, что изображения предварительно загружаются для них с помощью плагина предварительной загрузки, упомянутого в вопросе.

Если кто-то захочет дать дополнительный совет или более простой скрипт предварительной загрузки, я все слышу. В противном случае сделаю этот ответ правильным ...

И, для правильности, вот плагин, о котором я говорю:

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

Спасибо! Амит

person Amit    schedule 07.08.2010