Проверка закэшированности изображения

[abc_ua]

Здравствуйте, как проверить, закэшировано ли изображение?

вот такой вариант не везде отрабатывает http://jsfiddle.net/LmCFP/. В хроме можно увидеть, что какое-то время уходит на запрос к серверу, видимо поэтому проверка сразу не везде срабатывает(зависит от пинга и очереди задач в js?). Можно приделать таймер, но тогда придется упираться в выбор значения задержки. Например 100мс для кого-то хватит, а у других пинг больше и закэшированное изображение.комплит даст фолс.

Подскажите пожалуйста другое, если таковое есть, решение задачи?


Upd

еще интересует способ как определить, отключены ли в браузере картинки?

[Gvozd]

вот такой вариант не везде отрабатывает http://jsfiddle.net/LmCFP/.

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

Насколько я знаю, нет у способа определить закэшированность картинки
А еще это просто не нужно
Для чего вам это нужно?

[Serg_pnz]

Не знаю насколько правильно и оптимально, но по наитию пользуюсь этой функцией

$.preloadImagesS = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
	var Img = arguments[0]
	$(new Image()).load(function(){
		if (typeof callback == 'function') {
			callback();
		}
	}).attr('src', Img);
}

Пользуюсь так
1. Показываю в img спинер (крутилку)
2. Вызываю функцию

$.preloadImagesS (IMG_URL, function(){ /*обратны вызов*/ });

Если картинка в кеше - всё происходит мгновенно.

[Serg_pnz]

еще интересует способ как определить, отключены ли в браузере картинки?

<img onload()> как-то так

[abc_ua]

Gvozd,

после выполнения такого кода картинка в любом случае будет уже закешированной

я в конце приписываю ?random_number, чтобы проверить комплит. скрипт на dom content loaded висит, т.е. незагруженная картинка даст фолс, все правильно.

Нужно плавно показать(opacity) фон сайта при загрузке, если изображение не закэшировано, иначе - показать мгновенно.

Serg_pnz,

<img onload()> как-то так

дополню - как мгновенно определить, с онлоад не вижу вариантов. Например, если нужно подставить что-то вместо картинки: пишем контент, на онлоад скрываем контент, выводим картинку, если так, то не вариант.

Вашу функцию опробую чуть позже, спасибо.

[Gvozd]

я в конце приписываю ?random_number, чтобы проверить комплит. скрипт на dom content loaded висит, т.е. незагруженная картинка даст фолс, все правильно.

я правильно понял, что вы в своем приложении используете Image.jpg, а проверяете закеширвоанность для совсем других картинок - Image.jpg?1234 , Image.jpg?765 , и с другими рандомными цифрами.
Все это разные картинки с разным кешем

[melky]

Как подсказывает чутьё, это можно сделать так. Код комментирован.

Запустите код два раза.

Вкратце, об алгоритме

Загружает картинку два раза : в первый раз по обычному URI, второй раз - по новому URI - с добавлением случайного числа в конец. (в этом случае она не берётся из кеша, а загружается заново).
И сравнивает времена загрузок.

PS. вроде работает . В хроме время загрузки из кеша равно 1мс, а в ФФ - 10мс

// путь к картинке.
var origSrc = prompt("Путь к картинке :", "http://proplay.ru/images/users/gallery/77465/177073_l.jpg"); 

// массив с объектами информации о тестовых картинках
// первая - "из кеша", вторая - "холодной загрузки"
var imgs = [ { src: origSrc, el: new Image() }, { src: origSrc+(origSrc.indexOf("?") === -1 ? "?":"&")+Math.random(), el: new Image() } ];

// обработчик события загрузки для тестовых картинок.
// запишет в объект информации время загрузки.
var handler = function(){ 
    // индекс объекта информации для текущей картинки.
    var index = imgs[0].el === this ? 0:1; 
    // её время загрузки.
    imgs[index].loadTime = Date.now() - imgs[index].started; 
    // если загружена другая тестовая картинка
    if ("loadTime" in imgs[index ^ 1]) {
        // то разбираем полёты.
        onTwoImagesLoaded();
    }
};

// для каждой картинки устанавливаем обработчик события загрузки
for(var i = 0; i < 2; i += 1) {
    imgs[i].el.onload = handler;
    // начинаем загрузку
    imgs[i].el.src = imgs[i].src;
    // и записываем время старта загрузки
    imgs[i].started = Date.now();
}

// исполнится, когда загрузятся обе картинки.
function onTwoImagesLoaded() {
    // кеширована - это если время загрузки "из кеша"
    // составляет половину от "холодной" загрузки.
    var cached = imgs[0].loadTime / imgs[1].loadTime < 0.5;
    
    alert(cached ? "Кеширована":"Некеширована");
}

[abc_ua]

melky,
хорошая идея, спасибо, возьму на вооружение, но лишний трафик...

Gvozd,
я привел скрипт для проверки мгновенного получения значения img.complete в разных браузерах. Т.е. первый раз получаем фолс, второй - тру, дописываем рандомное число(это гет параметр?) - проверяем еще раз для надежности. Кол-во изображений в данном случае неважно(на сайте предполагается основной фон + дополнительный на отдельных страницах).

Всем спасибо за советы, надеялся, что в js есть какие-то нативные методы проверки.

Скорее всего буду реализовывать вариант с таймером, т.е. делаем замыкание и проверяем комплит, как только значение станет true - проверить задержку: 100мс - показать изображение сразу, больше 100мс - плавно сменить прозрачность.

P.s. вижу, что у знакомых форумчан резко упала карма, почему?

[dmitriymar]

01 $.preloadImagesS = function () {
02 if (typeof arguments[arguments.length - 1] == 'function') {
03 var callback = arguments[arguments.length - 1];
04 } else {
05 var callback = false;
06 }
07 var Img = arguments[0]
08 $(new Image()).load(function(){
09 if (typeof callback == 'function') {
10 callback();
11 }
12 }).attr('src', Img);
13 }

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

[Раед]

вижу, что у знакомых форумчан резко упала карма, почему?

Репутация: изменения