$ .ajax.load() вызывает обратный вызов перед загрузкой изображений

Question

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

$(element).load("url #id", function() 
{ 
    $(this).fadeIn(); 
}) 

Когда я загружаю данные, element выцветает, и я вижу, как изображения рисуются медленно на моем экране ... это, что изображение загружается, но компьютер работает медленно?

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

Answer 1

загрузит контент в ваш element, но затем вы можете найти все изображения и приложить к ним обратный вызов нагрузки, чтобы определить, когда были загружены все изображения. Однако это не очень надежно, так как событие load на изображениях может не срабатывать по различным причинам. В некоторых браузерах событие load будет синхронным, когда изображение будет кэшировано, поэтому оно будет срабатывать, прежде чем мы даже привяжем обработчик события на изображении. По этой причине, если изображения не загружаются через 5 секунд, мы покажем element.

$(element).load("url #id", function() { 
    var $self = $(this), 
     $images = $self.find('img'), 
     imgCount = $images.length, 
     loadedCount = 0; 

    $images.on('load', function() { 
     if (++loadedCount === imgCount) { 
      $self.fadeIn(); 
      $(this).off('load'); 
     } 
    }); 

    setTimeout(function() { 
     if (loadedCount !== imgCount) { 
      $self.fadeIn(); 
      $images.off('load'); 
     } 
    }, 5000); 
}); 

Answer 2

От jQuery documentation:

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

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

1. Она не работает стабильно и не надежно кроссбраузерный
2. Это не срабатывает правильно в WebKit, если ЦСИ изображения установлен на же ЦСИ, как и прежде
3. Это Безразлично» т правильно пузырек вверх по DOM дерево
4. Может прекратить огонь для изображений, которые уже живут в кэше браузера

В той же документации они предлагают душевное состояние для отображения графики при загрузке.

Возможно, вы хотите, чтобы свойство height было таким, каким оно должно быть перед отображением изображения, так как оно изменит размер только тогда, когда оно действительно было загружено (только если вы не указали его в css, хотя).