Как прокрутить изображение с задержкой по времени?

Question

На самом деле на странице продуктов мы хотим уменьшить нагрузку на сервер, чтобы принести изображения только после задержки от 2 до 3 секунд при наведении мыши. Итак, если пользователь наводил курсор, мы должны нажать на сервер через 2 секунды и принести новое изображение. Но приведенный ниже код не работает в соответствии с нашим ожиданием.

HTML теги:

<img class="rollover-images" data-rollover="{bringNewImage()}" src="{bringOldImage()}" /> 

Javascript:

$('.rollover-images').each(function() { 

     var newSrc = $(this).data('rollover'); 
     if(newSrc == 0) return; 

     var timeout, oldSrc; 
     $(this).hover(function() { 

      timeout = setTimeout(function() { 

       oldSrc = $(this).attr('src'); 
       $(this).attr('src', newSrc).stop(true,true).hide().fadeIn(1); 

      }, 2000); 

     }, function() { 

      clearTimeout(timeout); 
      $(this).attr('src', oldSrc).stop(true,true).hide().fadeIn(1); 

     }); 

    }); 

Answer 1

Есть несколько проблем, с посланным кодом

Вы не можете поместить в яваскрипте функции для атрибута HTML и ожидаем, что он будет заменен возвращаемым значением функции. Таким образом, ваш HTML должен быть

<img class="rollover-images" data-rollover="new.png" src="old.png" /> 

У вас возникла проблема с этим в функции таймаута. Поскольку вы начали новую область функций, значение этого не будет вашим узлом img. Так что ваши JS должны быть

$(this).hover(function() { 
    var self = this 
    timeout = setTimeout(function() { 
     oldSrc = $(self).attr('src'); 
     $(self).attr('src', newSrc).stop(true, true).hide().fadeIn(1); 
    }, 2000); 
}, function() { 
    clearTimeout(timeout); 
    $(this).attr('src', oldSrc).stop(true, true).hide().fadeIn(1); 
}); 

Обратите внимание, что мы определили называемую себя новую переменную, которая используется внутри вызова SetTimeout.