如何使用jQuery顺利更改<img rel="nofollow noreferrer" src ="..."/>？

Question

我现在正在做类似的事情:

$img.hover(function(){$(this).attr('src','1.jpg')},function(){$(this).attr('src','2.jpg')});

哪个不顺畅,因为加载图像需要相当长的时间.

Answer 1

如何在页面加载时预加载图像:

$(function () {
  var preloadImages = ['1.jpg', '2.jpg'];

  $.each(preloadImages, function () {
    $('<img/>').attr('src', this);
  });

  // ...
});

Answer 2

将两个图像组合在一起,将其更改为背景图像,并动态更改背景位置.

使用CSS精灵.

如果您需要坚持使用图像本身然后预加载两个图像,然后它将从缓存中获取第二个图像,这不会导致延迟.

使用CSS预加载图像