jQuery实现预加载图片的方法

jQuery实现预加载图片的方法

在需要展示大量图片的网站应用中，为了提升用户的体验，我们通常需要预加载图片。预加载图片是指在页面显示前将需要展示的图片提前加载，当用户实际需要访问时，能够更快地展现出来。本文将介绍使用jQuery来实现预加载图片的方法。

1. 使用$.Deferred()对象实现

$.Deferred()对象是jQuery中的一个异步处理工具，我们可以通过它的回调函数来实现图片的预加载。以下是代码示例：

var imgUrls = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
var imgTotal = imgUrls.length;
var loaded = 0;

$.each(imgUrls, function(index, imgUrl) {
  var img = new Image();
  $(img).on('load', function() {
    loaded++;
    $('.loading').text('Loading ' + Math.floor((loaded/imgTotal)*100) + '%');

    if (loaded === imgTotal) {
      $('.loading').hide();
      // 图片加载完成后执行的操作
    }
  }).attr('src', imgUrl);
});

以上代码的实现过程如下：

• 将需要预加载的图片url放入一个数组中
• 获取图片数量，用loaded变量记录图片加载进度
• 使用$.each遍历url数组，每遍历一次，创建一个Image对象，并将加载进度更新到loading页面元素中

• 使用 onload 事件监听图片是否成功加载，并更新加载进度，当全部图片加载完成后，隐藏loading页面元素，执行图片加载完成后需要执行的操作

• 使用jQuery.Deferred()对象实现

$.Deferred()对象也可以通过链式写法展示图片预加载的效果。以下是代码示例：

var imgUrls = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
var imgTotal = imgUrls.length;

var imgDefArr = [];

$.each(imgUrls, function(index, imgUrl) {
  var img = new Image();
  var imgDef = $.Deferred();

  $(img).on('load', function() {
    imgDef.resolve();
  }).attr('src', imgUrl);

  imgDefArr.push(imgDef);
});

$.when.apply(null, imgDefArr).then(function() {
  console.log('all images loaded');
  // 图片加载完成后执行的操作
});

以上代码的实现过程如下：

• 将需要预加载的图片url放入一个数组中
• 获取图片数量
• 遍历url数组，每遍历一次，创建一个Image对象，并创建一个Deferred对象imgDef
• 使用 onload 事件监听图片是否成功加载，并成功触发 imgDef.resolve() 方法
• 将imgDef对象推入 imgDefArr 数组中
• 在所有imgDef对象都被resolve后，执行$.when() 和 then() 方法中指定的回调函数。因为imgDefArr数组是一个异步数组，我们需要通过apply方法将数组中的对象作为$.when()函数的参数传入，否则$.when()不会按数组的方式解析参数

总结

本文介绍了通过$.Deferred()对象和jQuery.Deferred()对象两种方式实现图片预加载的方法。两种方法在实现过程中略有不同，而且$.Deferred()对象适用于小规模的图片预加载，而链式写法适用于大规模的预加载，适用不同的场景。使用以上两种方式，我们能够在网站应用中快速地实现图片预加载的效果，提升用户使用体验。