Jquery实现图片预加载与延时加载的方法

以下是详细讲解 "JQuery实现图片预加载与延迟加载的方法"的完整攻略：

什么是图片预加载？

图片预加载是在网页加载时提前把所需的图片加载进缓存，从而提高用户访问网页时的速度体验。而不是等到需要显示出来的时候再去加载，造成用户等待时间过长。

JQuery实现图片预加载的方法

实现图片预加载的方法一般有两种方式：

1. 利用JQuery的ajax请求

可以用JQuery的ajax方法来请求图片，并在请求成功后将其添加到缓存中。具体过程如下：

$.ajax({
  url: "image.jpg",
  cache: true,
  success: function(){
    // 图片已被预加载，可以执行后续操作
  }
});

其中，url参数表示图片的链接，cache参数表示是否启用缓存，success参数表示当图片加载成功后的回调函数。

2. 利用Javascript的Image对象

另一种方法是使用Javascript的Image对象。当图片对象的src属性设置后，它就会自动加载图片。代码如下：

var img = new Image();
img.src = "image.jpg";
img.onload = function(){
  // 图片已被预加载，可以执行后续操作
}

其中，img表示图片对象，src表示图片的链接，onload表示当图片加载成功后的回调函数。

什么是图片延迟加载？

图片延迟加载也叫懒加载，是指将页面中的图片延迟加载，当用户滚动页面到图片所在的位置时再加载图片，从而提高用户访问时的速度体验。

JQuery实现图片延迟加载的方法

也有多种方式可以实现图片的延迟加载，这里主要介绍比较常用的两种：

1. 利用JQuery的lazyload插件

lazyload是一个JQuery插件，可以很方便地实现图片的延迟加载。使用步骤如下：

第一步：引入lazyload插件的js文件

<script src="jquery.lazyload.min.js"></script>

第二步：为需要延迟加载的图片添加class名（比如lazy），并设置data-original属性为该图片的链接

<img class="lazy" data-original="image.jpg" src="placeholder.jpg" width="100" height="100">

第三步：使用lazyload方法初始化

$("img.lazy").lazyload({
  threshold : 200,  //设置距离屏幕多远时才开始加载图片
  effect : "fadeIn"  //设置图片渐隐渐现的效果
});

2. 利用JQuery的scroll和offset方法

利用JQuery的scroll和offset方法也可以实现图片的延迟加载。具体步骤如下：

第一步：为需要延迟加载的图片设置class名（比如lazy），并设置data-original属性为该图片的链接

<img class="lazy" data-original="image.jpg" src="placeholder.jpg" width="100" height="100">

第二步：定义一个函数，用来判断图片是否已经滚动到屏幕上的位置，如果滚动到位置则开始加载图片

function lazyload(){
  var scrollTop = $(window).scrollTop();  //获取当前窗口距离顶部的距离
  $("img.lazy").each(function(){
    var offsetTop = $(this).offset().top;  //获取图片距离顶部的距离
    if(offsetTop < scrollTop + $(window).height()){
      $(this).attr("src", $(this).data("original") );  //开始加载图片
      $(this).removeClass("lazy");
    }
  });
}

第三步：在页面加载完成后，使用$(window).scroll()方法来监听滚动事件，并触发lazyload函数来判断图片是否需要加载

$(document).ready(function(){
  lazyload();  //页面加载完成后先判断一遍是否需要加载图片
  $(window).scroll(function(){
    lazyload();  //监听滚动事件，判断是否需要加载图片
  });
});

这样当用户滚动到图片的位置时，图片就会开始加载了。

以上就是JQuery实现图片预加载和延迟加载的两种方法，希望能帮助到你。