JQuery.load() не работает с изображениями (возможно, кэширование?)

У меня есть довольно простой код jQuery:

...
$(this).find('img').load(function(){
   loadedImages++;
   if(loadedImages == $this.find('img').length){
...

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

Любые идеи о том, как исправить это?

Ответы

Ответ 1

Можно было бы добавить "фиктивную переменную" в конце URL-адреса, который вы используете для захвата изображения... например, время в миллисекундах, добавленное как параметр строки запроса.

Ответ 2

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

var load_handler = function() {
    loadedImages++;
    …
}
$(this).find('img').filter(function() {
    return this.complete;
}).each(load_handler).end().load(load_handler);

Вы также можете создать свою собственную функцию присоединения к событию:

jQuery.fn.extend({
    ensureLoad: function(handler) {
        return this.each(function() {
            if(this.complete) {
                handler.call(this);
            } else {
                $(this).load(handler);
            }
        });
    }
});

И затем назовите его следующим образом:

$(this).find('img').ensureLoad(function(){
    loadedImages++;
    if(loadedImages == $this.find('img').length){
    …
});

Ответ 3

Как сказал Рон и Эль Гуапо, ответ заключается в том, чтобы добавить запрос в конце URL-адреса. Я сделал это вот так:

$(this).find('img').each(function(){
   $(this).attr('src',$(this).attr('src')+'?'+new Date().getTime())  
}).load(function(){
   //This will always run now!