title: How to rollover image with time delay?
body: <p>Actually in the products page, we want to reduce the burden on the server to bring the images only after delay of 2 to 3 seconds on mouse over. So If the user hover the cursor we should hit the server after 2 seconds and bring the new image. But the below code is not working as per our expectation.</p>
  
  <p><strong>HTML Tag:</strong></p>
  
  <pre><code>&lt;img class="rollover-images" data-rollover="{bringNewImage()}" src="{bringOldImage()}" /&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$('.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);
  
          });
  
      });
  </code></pre>