JS中图片缓冲loading技术的实例代码

下面我将详细讲解JS中图片缓冲loading技术的实例代码攻略。

1. 图片缓冲loading技术的作用

图片缓冲loading技术可以解决图片加载过慢或者图片尚未加载完成时页面出现的空白或错乱现象,使得页面更加优雅和美观。

2. 实现步骤

2.1 定义图片缓存对象

首先,我们需要定义一个空对象,用于保存本页面中所需加载的所有图片资源。

let imgObj = {};

2.2 预加载图片

接下来,我们需要编写一个方法,用于预加载图片。该方法主要实现两个功能:

  1. 预加载图片,将图片对象保存到imgObj对象中。
  2. 根据加载状态,动态显示加载进度。

以下代码演示了预加载图片的实现方式:

function preloadImage(arr) {
  let progress = 0;
  let len = arr.length;

  for(let i = 0; i < len; i++) {
    let img = new Image();
    img.onload = img.onerror = function() {
      progress++;
      let percent = Math.floor(progress / len * 100);
      console.log(`${percent}%`);
    };
    img.src = arr[i];
    imgObj[arr[i]] = img;
  }
}
  • arr为一个存储图片路径的数组。
  • let progress = 0;声明一个计数器progress用于记录已加载完成的图片数量。
  • let len = arr.length; 记录图片数组的长度。
  • let img = new Image(); 声明一个新的图片对象。
  • img.onload = img.onerror = function() {}图片加载完成或者出错时的回调函数。
  • progress++图片加载完成或者出错时,计数器加1,记录完成的情况
  • let percent = Math.floor(progress / len * 100); 计算加载进度百分比,向下取整。
  • console.log(${percent}%);将加载进度百分比打印出来,你可以根据实际情况,改为展示进度条等效果等等。
  • img.src = arr[i]; 图片对象的地址属性赋值为图片路径。
  • imgObj[arr[i]] = img; 将图片对象保存到imgObj对象中,以路径名作为imgObj对象的属性名。

2.3 使用预加载的图片

全部图片预加载完成后,我们就可以通过imgObj对象来获取预加载的图片,然后使用这些图片了。以下代码演示了如何使用imgObj中的图片对象:

let img = imgObj['./images/logo.png']; //根据图片路径获取img对象
document.body.appendChild(img); //将img对象添加到body中

以上代码中,我们将预加载的logo图片动态添加到了body中。

3. 示例说明

3.1 图片预加载效果实现

以下是一个使用图片预加载技术实现的图片轮播效果示例。代码实现步骤和上文类似,只不过是将预加载的图片插入到网页中的轮播图中。

<button id="pre_load_btn">图片预加载</button>
<div id="imgs_wrap"></div>
let imgObj = {};

function preloadImage(arr) {
  let progress = 0;
  let len = arr.length;

  for(let i = 0; i < len; i++) {
    let img = new Image();
    img.onload = img.onerror = function() {
      progress++;
      let percent = Math.floor(progress / len * 100);
      console.log(`${percent}%`);
      if(progress === len) {
        showImgs(arr);
      }
    };
    img.src = arr[i];
    imgObj[arr[i]] = img;
  }
}

function showImgs(arr) {
  let imgsWrap = document.getElementById('imgs_wrap');
  for(let i = 0; i < arr.length; i++) {
    let img = imgObj[arr[i]];
    imgsWrap.appendChild(img);
  }
}

let imgArr = [
  './images/01.jpg',
  './images/02.jpg',
  './images/03.jpg',
  './images/04.jpg',
];

let preLoadBtn = document.getElementById('pre_load_btn');
preLoadBtn.onclick = function() {
  preloadImage(imgArr);
};

3.2 图片预加载进度展示效果实现

以下是一个图片预加载进度展示的示例。点击按钮后,将会开始图片预加载,并在页面上展示图片预加载的进度,注意,你需要将以下HTML和js代码复制到你的HTML文件中试验:

<button id="pre_load_btn">图片预加载</button>
<div id="progress_wrap"></div>
let imgObj = {};

function preloadImage(arr) {
  let progress = 0;
  let len = arr.length;

  let progressWrap = document.getElementById('progress_wrap');
  progressWrap.innerHTML = '0%';

  for(let i = 0; i < len; i++) {
    let img = new Image();
    img.onload = img.onerror = function() {
      progress++;
      let percent = Math.floor(progress / len * 100);
      progressWrap.innerHTML = `${percent}%`;
      console.log(`${percent}%`);
      if(progress === len) {
        console.log('图片加载完毕!');
      }
    };
    img.src = arr[i];
    imgObj[arr[i]] = img;
  }
}

let imgArr = [
  './images/01.jpg',
  './images/02.jpg',
  './images/03.jpg',
  './images/04.jpg',
];

let preLoadBtn = document.getElementById('pre_load_btn');
preLoadBtn.onclick = function() {
  preloadImage(imgArr);
};

以上代码中,我们根据向页面插入的div元素节点,动态显示图片预加载的进度,你也可以根据需求自定义样式展示进度条等效果。

4. 总结

以上就是JS中图片缓冲loading技术的实例代码攻略。使用预加载技术可以提高网页的响应速度,对于图片资源较多的网站,使用这种方法可以减少用户的等待时间,提高体验。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中图片缓冲loading技术的实例代码 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • window.parent与window.openner区别介绍

    window.parent与window.opener区别介绍 在网页中经常出现需要进行页面跳转的情况,比如新窗口打开链接,或者在iframe中嵌入其他网页。在JavaScript中有两个常用的属性可用于控制页面跳转:window.parent和window.opener。在本文中,将详细介绍这两个属性的区别以及其应用场景。 window.parent wi…

    JavaScript 2023年6月11日
    00
  • 前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解 什么是前端组件化 前端组件化,是一种将页面拆分成多个可重用组件的开发方式。这种方式将页面抽象为一系列具有独立功能和样式的小组件,而这些组件可以在不同的页面中重复使用和组合,实现了代码的复用和模块化。 组件的基本要素 在前端组件化中,组件是构成页面的基本单位。组件有三个基本要素: HTML 结构:组件必须被封装在一个 HTML 元素…

    JavaScript 2023年6月11日
    00
  • JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)

    JS对外部文件的加载: 使用 使用XMLHttpRequest对象异步加载JS文件 function loadScript(url, callback) { var script = document.createElement(‘script’); script.type = ‘text/javascript’; if (script.readyState…

    JavaScript 2023年5月27日
    00
  • 浅谈Vue使用Elementui修改默认的最快方法

    下面我来详细讲解如何使用Element UI修改Vue的默认主题样式。 安装 Element UI 首先需要安装Element UI,可以通过npm安装: npm install element-ui -S 引入 Element UI 在Vue项目的main.js文件中,引入Element UI的样式文件和js文件: import Vue from ‘vue…

    JavaScript 2023年6月10日
    00
  • 解决 JScript 中使用日期类型数据时出现类型错误的问题

    当在 JScript 中使用日期类型数据时,有时会遇到类型错误的问题,这是因为 JScript 中的日期类型是 COM/OLE Automation 中的 Variant 类型转换成的。Variant 类型有不同的子类型,而 Date 是其中的一种。下面介绍一些解决这个问题的方法: 方法一:使用 new Date() 使用 new Date() 可以将字符串…

    JavaScript 2023年6月10日
    00
  • JavaScript定时器实现的原理分析

    关于“JavaScript定时器实现的原理分析”的完整攻略,以下内容供参考。 纯文本格式 一、JavaScript定时器的种类 在JavaScript中,有两种类型的定时器:setTimeout和setInterval。它们两者的区别在于: setTimeout:只执行一次定时任务,执行完后就不再执行; setInterval:每隔一段时间重复执行定时任务。…

    JavaScript 2023年5月28日
    00
  • 扒一扒JavaScript 预解释

    下面是关于 “扒一扒JavaScript 预解释” 的完整攻略: 什么是JavaScript预解释? JavaScript是一种解释型语言,它在运行前必须进行解释并执行代码,而预解释则是在JavaScript代码执行之前进行一遍解释的过程。预解释其实是JavaScript解释器在读取JavaScript代码时,先查找所有定义的变量、函数,并且把这些变量、函数…

    JavaScript 2023年5月18日
    00
  • 浅谈js中test()函数在正则中的使用

    下面是针对“浅谈js中test()函数在正则中的使用”的完整攻略: 前言 正则表达式是一种强大的工具,可用于在文本中搜索特定的模式。正则表达式由一个模式字符串和用于搜索该模式的标志组成,JS内置RegExp对象可以实现正则表达式匹配,test()函数是用于测试字符串是否匹配某个正则表达式的方法。 test()函数的语法与返回值 test()函数的语法如下: …

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部