js 函数的多图片预加载(preload) 带插件版完整解析
前言:
本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。
本篇文章为您分析一下原生JS实现图片预加载效果
一是为了随笔记录一下笔者对这块知识点的理解
二是为了让一些初学者能大致了解图片的预加载原理
后续会陆续在此基础上跟新迭代现有的代码。
笔者希望读者能提供一些更加优化的代码,当然,最好是ECMAScript 2015以前的,感激不尽
页面需求
1. 在用户刚刚进入页面时,可能由于网络的差异,先加载一张默认的图片。等把页面的图片都下载好之后再添加到默认图片区域内。
HTML结构
<div class="preload"></div>
CSS样式
img {
width: 300px;
height: 250px;
}
JS行为
JS大致思路
1. 根据用户传入的配置信息设置
(1).图片数组
(2).是否加载完再渲染
(3).回调函数
(4).渲染的元素
2. 配置默认值
3. 判断是否是下载完立即渲染的情况
4. 如果加载完以后需要执行的函数
5. 如果不是下载完再执行的情况
6. 下载完图片以后调用回调函数
if (!window.myPlugin) {
window.myPlugin = {};
}
/**
* 多图片的预加载
* @param {Object} option 包含默认图片的路径、真实图片路径数组、渲染的dom元素、是否图片下载完再渲染、完成之后的回调函数、
*/
window.myPlugin.preload = function (option) {
if (option.immediate === undefined) {
option.immediate = true;
}
option.arr = (typeof option.arr !== "object") ? [option.arr] : option.arr;
// 第六步: 计数
var count = 0;
if (option.immediate) { // 第三步: 如果是下载完立即渲染
option.arr.forEach(function (ele) { // 3.1 遍历图片数组
var image = new Image(); // 3.2 创建原始图片对象
option.dom.appendChild(image); // 3.3 将对象插入节点
image.setAttribute("src", option.defaultImg); // 3.4 设置默认图片
var newImage = new Image(); // 3.5 创建一个临时的图片对象
newImage.setAttribute("src", ele) // 3.6 设置路径用于请求图片
newImage.onload = function () { // 第四步: 图片加载完成事件
// 6.1 每次加载完一张图片count+1;
count++;
// 4.1 判断当前的图片对象是否还是默认图片
if (image.getAttribute("src") === option.defaultImg) {
// 4.2 将下载后的图片路径修改到原始图片对象
image.setAttribute("src", ele);
}
// 6.2 判断当前的次数是否等于了数组的长度(加载完图片之后运行的函数)
if (count === option.arr.length) {
// 6.3 运行加载完之后的回调函数 ,传入参数
option.callback.call(this);
}
}
})
} else { // 第五步: 如果不是下载完再渲染
option.arr.forEach(function (ele) { // 5.1 遍历图片数组
var image = new Image(); // 5.2 创建原始图片对象
option.dom.appendChild(image); // 5.3 将对象插入节点
image.style.background = `url(${option.defaultImg}) no-repeat`; // 5.4 设置默认图片
image.onload = function () {
// 6.4 每次加载完一张图片count+1;
count++;
// 6.5 判断当前的次数是否等于了数组的长度(加载完图片之后运行的函数)
if (count === option.arr.length) {
// 6.3 运行加载完之后的回调函数 ,传入参数
option.callback.call(count);
}
}
image.setAttribute("src", ele); // 5.5 设置图片路径
})
}
}
结语
本片文章如有错误或者不好的,请给位大牛指点指点给小生。
创作不易,请告知....
js 函数的多图片预加载(preload) 带插件版完整解析的更多相关文章
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
- JS代理模式实现图片预加载
---恢复内容开始--- 刚刚说了懒加载,现在我们来搞搞预加载吧 预加载的核心: 图片等静态资源在使用前提前请求. 资源后续使用可以直接从缓存中加载,提升用户体验. 几个误区: 预加载不是为了减少页面 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- Javascript实现图片预加载【回调函数,多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- Javascript兑现图片预加载【回调函数,多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- js原生图片懒加载 或 js原生图片预加载,html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
随机推荐
- 分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆
自己抓的QQ包以及整合了网上一些已经封装好了的代码具体如下:QQ: <?php class QQ extends Curl_Api { //获取登录验证码 public function QRc ...
- .NET Core项目部署到Linux(Centos7)(四)VMware Workstation虚拟机Centos 7安装
目录 1.前言 2.环境和软件的准备 3.创建.NET Core API项目 4.VMware Workstation虚拟机及Centos 7安装 5.Centos 7安装.NET Core环境 6. ...
- Linux Shell编程,双括号运算符(())
双括号运算符是shell非常强大的扩展. 这里简要介绍两种使用方式: 1.条件判断 跟在if.while.until,for等需要逻辑条件的命令后,进行逻辑判断 if(( expr));then … ...
- Linux学习,ACL权限管理
1.setfacl 得到指定文件的ACL权限 -m 表示后续有参数,不可与 -x参数配合使用 -x 删除后续的acl参数,不可与 -m 配合使用 -b 删除所 ...
- Linux命文件与目录属性
一.linux系统中文件标志 d ===> 目录 - ===> 文件 l ===> 连接文件 b ===> 可供存储设备文件 c ===> 串形端口设备文件(鼠标,键盘) ...
- ThinkPHP中的行为扩展和插件详解
原理分析 将标签与类之间的对应关系(如'app_init'=>array('Common\Behavior\InitHook')),通过Hook类中import或add方法,加载到Hook类中静 ...
- Struts2-学习笔记系列(4)-访问servlet api
5.1通过actioncontext: public String execute() throws Exception { ActionContext ctx = ActionContext.get ...
- Powershell如何制定属性并输出
这个标题看着有些云里雾里.... 前一阵,群里有个朋友问博主“我想把所有用户的SMTP地址全部输出到CSV文件中进行统计,但是SMTP地址似乎输出的是错误的,可在shell里看输出的内容是正确的阿” ...
- 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图
一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...
- java集合中的一个移除数据陷阱(遍历集合自身并同时删除被遍历数据)
下面是网上的其他解释,更能从本质上解释原因:Iterator 是工作在一个独立的线程中,并且拥有一个 mutex 锁. Iterator 被创建之后会建立一个指向原来对象的单链索引表,当原来的对象数量 ...