jQuery预加载图片常用方法

jQuery预加载图片常用方法的攻略如下：

什么是预加载图片？

预加载图片是指在页面加载完毕之前提前加载需要用到的图片资源，可以更快地呈现图片，提高用户体验。jQuery是一个广泛使用的JavaScript库，通过它可以方便地实现图片预加载效果。

实现图片预加载的方法

方法一：使用Image对象预加载图片

使用Image对象预加载图片的基本步骤如下：

1. 创建一个空的Image对象
2. 在Image对象的onload事件中处理加载完成后的逻辑
3. 给Image对象的src属性赋值为需要加载的图片url
4. 将该Image对象添加到页面中，触发图片的加载

以下是一个基于这一原理的jQuery预加载图片代码示例：

var img = new Image();
$(img).on('load', function() {
  console.log('image loaded');
});
img.src = 'http://example.com/image.jpg';

这段代码创建了一个Image对象img，设置它的src属性为需要预加载的图片url，当图片加载完成之后，会触发它的load事件，在load事件中打印一句话。

方法二：使用jQuery的Deferred对象预加载图片

jQuery的Deferred对象是一种用来处理异步操作的对象。通过使用Deferred对象，可以实现更加复杂的异步操作。下面是一个使用Deferred对象预加载图片的代码示例：

function preloadImage(url) {
  var deferred = $.Deferred();
  var img = new Image();
  $(img).on('load', function() {
    deferred.resolve();
  });
  img.src = url;
  return deferred.promise();
}

$.when(
  preloadImage('http://example.com/image1.jpg'),
  preloadImage('http://example.com/image2.jpg')
).done(function() {
  console.log('all images loaded');
});

这段代码定义了一个名为preloadImage的函数，传入一个url参数，返回一个Deferred对象。在这个函数内部，创建了一个Image对象img，设置它的src属性为需要预加载的图片url，当图片加载完成之后，使用Deferred对象的resolve方法触发该对象的resolve事件。在主函数中，使用$.when方法等待两个图片都加载成功，当两个图片都加载完成之后，执行done方法中的回调函数，打印出一句话。

总结

使用jQuery的方法预加载图片，可以提高用户体验。常用的两种方法是使用Image对象预加载图片和使用Deferred对象预加载图片，开发者可以根据实际情况选择合适的方法。