jQuery .load () не запускается на изображениях (возможно, кеширование?) - PullRequest
Новая
       18

jQuery .load () не запускается на изображениях (возможно, кеширование?)

15 голосов
/ 11 апреля 2011

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

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

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

Есть идеи как это исправить?

Ответы [ 3 ]

41 голосов
/ 11 апреля 2011

Я думаю, что это обсуждалось ранее .Проблема не в кешировании как таковом, а во времени: изображения, возможно, уже были загружены к тому времени, когда обработчик событий присоединен (поэтому он никогда не запускается).Это также может произойти, если не происходит кэширование, например, в многопоточном браузере при очень быстром соединении.К счастью, есть свойство .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){
    …
});
4 голосов
/ 11 апреля 2011

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

Редактировать: Предотвращение кэширования изображений в браузере - очень плохая идея в 99% случаев, поскольку это замедляет работу вашего приложения.Вместо этого вам следует проверить, загружено ли уже изображение, и если нет, дождаться завершения события загрузки.

3 голосов
/ 11 апреля 2011

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

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