Как узнать, когда изображение уже находится в кэше браузера в IE9? - PullRequest
Новая
       29

Как узнать, когда изображение уже находится в кэше браузера в IE9?

3 голосов
/ 02 декабря 2011

IE9 показывает false complete свойство со следующим: 

$("<img/>",{src:"http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg"}).each(function(){console.log(this.complete);});

Если вы запустите этот код в консоли браузера (подождите достаточно времени для загрузки изображения), затем запустите его снова.IE9 - единственный браузер, который я тестировал, показывая false во второй раз.Кажется, это известная ошибка из простого поиска в Google. Мне нужен обходной путь, если у кого-то он есть.

Это может быть проблема синхронизации, так как приведенный выше код устанавливает глобальную переменную а-ля: 

var img = $("<img....

затем проверка свойств этой переменной дает разные результаты: 

img[0].complete === true

и 

 img[0].readyState === "complete"

Должен быть какой-то другой способ получения этой информации.Есть идеи ... Спасибо!

Ответы [ 5 ]

2 голосов
/ 28 марта 2012

Я использую это: 

function doWhenLoaded(obj,callback) {

if($.browser.msie) {
    var src=$(obj).attr("src");
    $(obj).attr("src","");
    $(obj).attr("src",src);
}

$(obj).one("load",callback).each(function(){
    // alert(this.readyState+" "+this.src);
    if(
        this.complete
        || this.readyState == "complete"
        || this.readyState == 4
        || ($.browser.msie && parseInt($.browser.version) == 6)
    ) {
        $(this).trigger("load");
    }
}); 
}

Образец: 

doWhenLoaded("#main_background_img",function(){
    $("#main_background_img").slideDown(1000);  
});
0 голосов
/ 12 сентября 2014

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

По сути, вы создаете собственный метод jQuery, который выполняетаналогичные умения все в одной функции: 

$.fn.imgLoad = function(callback) {
    return this.each(function() {
        if(callback){
            if(this.complete || (this.readyState === 4) || (this.readyState === 'complete')) {
                callback.apply(this);
            } else {
                $(this).one('load.imgCallback', function(){
                    callback.apply(this);
                });
            }
        }
    });
}

Это объединяет проверку всех возможных событий в одно (как кэшированное, так и не кэшированное), но также делает метод цепным.Вы можете позвонить с помощью: 

$('img').imgLoad(function(){
    console.log('loaded');
});

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

0 голосов
/ 02 декабря 2011

Обычно я предварительно загружаю изображение: 

var img = new Image();
$(img).attr('src', "foo.jpg");
if (img.complete || img.readyState === 4) {
    // image is cached
    alert("the image was cached!");
} else {
    $(img).load(function() {
        // image was not cached, but done loading
        alert("the image was not cached, but it is done loading.");
    });
}

Я не глубоко отлаживал его в IE9, но не сталкивался с какими-либо проблемами.

код был извлечен из https://github.com/tentonaxe/jQuery-preloadImages/blob/master/jquery.preloadimages.js и изменен.

0 голосов
/ 02 декабря 2011

Вы можете попробовать запрос AJAX на изображении и увидеть код состояния. Если это 304, это означает, что изображение было кэшировано. Не уверен, насколько хорошо это будет работать, хотя. Может быть, AJAX немного удаляет кеш.

0 голосов
/ 02 декабря 2011

Вы не можете определить, кешируется ли он, но вы можете принудительно загрузить его, "засолив" имя файла: 

src:"http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg?"+new Date()
...