jQuery实现图片预加载效果

下面是jQuery实现图片预加载效果的完整攻略：

准备工作

首先，需要在HTML文件中引入jQuery库。可以使用CDN方式引入，也可以将jQuery库下载至本地进行引用。具体操作方式如下：

<!-- CDN引入方式 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 本地引用方式 -->
<script src="jquery.min.js"></script>

实现步骤

第一步 - 获取图片链接

首先，需要获取需要预加载的图片链接，可以使用数组的方式将图片链接存储起来。例如：

var imgList = [
  'http://example.com/img1.jpg',
  'http://example.com/img2.jpg',
  'http://example.com/img3.jpg',
  'http://example.com/img4.jpg'
];

第二步 - 预加载图片

接下来，需要使用jQuery的$.ajax()或者$.get()方法来加载图片。以下是使用$.get()方法加载图片的示例代码：

$(function(){
  // 定义变量
  var imgList = [
    'http://example.com/img1.jpg',
    'http://example.com/img2.jpg',
    'http://example.com/img3.jpg',
    'http://example.com/img4.jpg'
  ];
  var imgTotal = imgList.length;  // 图片总数
  var imgCount = 0;  // 已加载的图片数量

  // 加载图片
  for(var i=0; i<imgTotal; i++){
    var img = new Image();
    $(img).on('load error', function(){
      imgCount++;  // 加载完成，则图片数量+1
      if(imgCount>=imgTotal){  // 所有图片都已加载完成
        console.log('所有图片加载完成！');
      }else{
        // 计算加载百分比
        var percent = (imgCount/imgTotal*100).toFixed(0);
        console.log(percent + '%');
      }
    });
    img.src = imgList[i];  // 加载图片
  }
});

以上代码中，我们通过new Image()方法创建一个图片对象，并通过.on('load error'...)方法监听图片加载完成和加载失败事件，随后通过img.src = imgList[i]方法加载图片。如果所有图片都已经成功加载，就会打印出“所有图片加载完成！”；如果还有未加载完成的图片，就会根据已加载图片数量计算出“加载百分比”，并输出到控制台。

第三步 - 显示加载进度

以上代码已经实现了预加载图片的功能，但是并没有直观的显示加载进度。为了让用户直接看到当前加载进度，我们可以在页面上添加一个进度条，并将加载百分比实时显示在进度条上。以下是示例代码：

<!-- HTML代码 -->
<div class="progress">
  <div class="progress-bar"></div>
</div>

$(function(){
  // 定义变量
  var imgList = [
    'http://example.com/img1.jpg',
    'http://example.com/img2.jpg',
    'http://example.com/img3.jpg',
    'http://example.com/img4.jpg'
  ];
  var imgTotal = imgList.length;  // 图片总数
  var imgCount = 0;  // 已加载的图片数量

  // 显示进度条
  $('.progress-bar').css('width', '0');

  // 加载图片
  for(var i=0; i<imgTotal; i++){
    var img = new Image();
    $(img).on('load error', function(){
      imgCount++;  // 加载完成，则图片数量+1
      // 计算加载百分比并实时显示
      var percent = (imgCount/imgTotal*100).toFixed(0);
      $('.progress-bar').css('width', percent+'%').text(percent+'%');
      if(imgCount>=imgTotal){  // 所有图片都已加载完成
        console.log('所有图片加载完成！');
      }
    });
    img.src = imgList[i];  // 加载图片
  }
});

以上代码中，我们首先为进度条添加了基础的HTML代码。在JavaScript中，我们使用.css('width', percent+'%').text(percent+'%')方法实时计算并显示加载进度，其中percent是当前已加载图片的百分比。如果所有图片都已经成功加载，就会打印出“所有图片加载完成！”。

示例说明

以下是两个示例，演示了如何使用以上的代码实现图片预加载效果。

示例1 - 图片轮播

假设页面中有4张图片，需要实现图片轮播效果。为了避免图片在轮播过程中出现卡顿和闪现，我们可以先将所有图片预加载完成，然后再进行轮播展示。以下是示例代码：

<!-- HTML代码 -->
<div class="slideshow">
  <div class="slideshow-images">
    <img src="http://example.com/placeholder.jpg" alt="图片1">
    <img src="http://example.com/placeholder.jpg" alt="图片2">
    <img src="http://example.com/placeholder.jpg" alt="图片3">
    <img src="http://example.com/placeholder.jpg" alt="图片4">
  </div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>

$(function(){
  // 定义变量
  var imgList = [
    'http://example.com/img1.jpg',
    'http://example.com/img2.jpg',
    'http://example.com/img3.jpg',
    'http://example.com/img4.jpg'
  ];
  var imgTotal = imgList.length;  // 图片总数
  var imgCount = 0;  // 已加载的图片数量

  // 显示进度条
  $('.progress-bar').css('width', '0');

  // 加载图片
  for(var i=0; i<imgTotal; i++){
    var img = new Image();
    $(img).on('load error', function(){
      imgCount++;  // 加载完成，则图片数量+1
      // 计算加载百分比并实时显示
      var percent = (imgCount/imgTotal*100).toFixed(0);
      $('.progress-bar').css('width', percent+'%').text(percent+'%');
      if(imgCount>=imgTotal){  // 所有图片都已加载完成
        // 开始轮播
        setInterval(function(){
          var currentImg = $('.slideshow-images img:visible');
          var nextImg = currentImg.next();
          if(nextImg.length==0){  // 已到最后一张图片
            nextImg = $('.slideshow-images img:first');
          }
          currentImg.fadeOut(500);
          nextImg.fadeIn(500);
        }, 3000);
      }
    });
    img.src = imgList[i];  // 加载图片
  }
});

以上代码中，我们为页面添加了HTML代码，并在jQuery中实现了图片预加载和图片轮播效果。执行代码后，页面会先加载所有的图片，同时在页面上实时显示加载进度。当所有图片都已经成功加载后，就会开始轮播展示图片。

示例2 - 图片瀑布流

假设页面中需要展示一堆图片，使用瀑布流布局展示效果更佳。为了让图片展示效果更好，我们可以先将所有图片预加载完成，然后再展示图片。以下是示例代码：

<!-- HTML代码 -->
<div class="waterfall">
  <div class="waterfall-container"></div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>

$(function(){
  // 定义变量
  var imgList = [
    'http://example.com/img1.jpg',
    'http://example.com/img2.jpg',
    'http://example.com/img3.jpg',
    'http://example.com/img4.jpg',
    'http://example.com/img5.jpg',
    'http://example.com/img6.jpg',
    'http://example.com/img7.jpg',
    'http://example.com/img8.jpg',
    'http://example.com/img9.jpg',
    'http://example.com/img10.jpg'
  ];
  var imgTotal = imgList.length;  // 图片总数
  var imgCount = 0;  // 已加载的图片数量

  // 显示进度条
  $('.progress-bar').css('width', '0');

  // 加载图片
  for(var i=0; i<imgTotal; i++){
    var img = new Image();
    $(img).on('load error', function(){
      imgCount++;  // 加载完成，则图片数量+1
      // 计算加载百分比并实时显示
      var percent = (imgCount/imgTotal*100).toFixed(0);
      $('.progress-bar').css('width', percent+'%').text(percent+'%');
      if(imgCount>=imgTotal){  // 所有图片都已加载完成
        // 创建图片DOM节点
        for(var j=0; j<imgTotal; j++){
          var imgNode = $('<img>').attr('src', imgList[j]);
          $('.waterfall-container').append(imgNode);
        }
        // 加载完成
        console.log('所有图片加载完成！');
      }
    });
    img.src = imgList[i];  // 加载图片
  }
});

以上代码中，我们为页面添加了HTML代码，并在jQuery中实现了图片预加载和瀑布流布局。执行代码后，页面会先加载所有的图片，同时在页面上实时显示加载进度。当所有图片都已经成功加载后，就会根据瀑布流布局展示图片。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现图片预加载效果 - Python技术站