Проблема с предварительной загрузкой изображения (с использованием $ ("img"). Load())

Question

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

$("img").load(function(){ //image preloading 

//some function & variable setting 

    $listingItems.hover(
     function(){ 
      //effect 
     }, 
     function(){ 
      //effect back 
     } 
    ) 

}) // load 

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

Вы можете посмотреть на источник здесь можно: http://meodai.ch/rundum/shop.html

Что я сделал не так? Может ли кто-нибудь помочь? Есть ли другой простой способ предварительной загрузки изображений перед выполнением функции?

Answer 1

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

$("img").one('load', function(){ 
    //current code 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

Это петли, хотя изображение, если они .complete (либо загружены действительно быстро или из кэша) это вызывает обработчик события load, если он уже бежал (действительно быстрый случай нагрузки) , а не sw есть, вот что такое .one().