前言:

        本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。

        本篇文章为您分析一下原生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) 带插件版完整解析的更多相关文章

  1. js 函数的多图片懒加载(lazy) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...

  2. JS代理模式实现图片预加载

    ---恢复内容开始--- 刚刚说了懒加载,现在我们来搞搞预加载吧 预加载的核心: 图片等静态资源在使用前提前请求. 资源后续使用可以直接从缓存中加载,提升用户体验. 几个误区: 预加载不是为了减少页面 ...

  3. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  4. 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  5. Javascript实现图片预加载【回调函数,多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

  6. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  7. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  8. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

  9. js原生图片懒加载 或 js原生图片预加载,html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

随机推荐

  1. 分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆

    自己抓的QQ包以及整合了网上一些已经封装好了的代码具体如下:QQ: <?php class QQ extends Curl_Api { //获取登录验证码 public function QRc ...

  2. .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. ...

  3. Linux Shell编程,双括号运算符(())

    双括号运算符是shell非常强大的扩展. 这里简要介绍两种使用方式: 1.条件判断 跟在if.while.until,for等需要逻辑条件的命令后,进行逻辑判断 if(( expr));then … ...

  4. Linux学习,ACL权限管理

    1.setfacl 得到指定文件的ACL权限 -m       表示后续有参数,不可与 -x参数配合使用 -x         删除后续的acl参数,不可与 -m 配合使用 -b        删除所 ...

  5. Linux命文件与目录属性

    一.linux系统中文件标志 d ===> 目录 - ===> 文件 l ===> 连接文件 b ===> 可供存储设备文件 c ===> 串形端口设备文件(鼠标,键盘) ...

  6. ThinkPHP中的行为扩展和插件详解

    原理分析 将标签与类之间的对应关系(如'app_init'=>array('Common\Behavior\InitHook')),通过Hook类中import或add方法,加载到Hook类中静 ...

  7. Struts2-学习笔记系列(4)-访问servlet api

    5.1通过actioncontext: public String execute() throws Exception { ActionContext ctx = ActionContext.get ...

  8. Powershell如何制定属性并输出

    这个标题看着有些云里雾里.... 前一阵,群里有个朋友问博主“我想把所有用户的SMTP地址全部输出到CSV文件中进行统计,但是SMTP地址似乎输出的是错误的,可在shell里看输出的内容是正确的阿” ...

  9. 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...

  10. java集合中的一个移除数据陷阱(遍历集合自身并同时删除被遍历数据)

    下面是网上的其他解释,更能从本质上解释原因:Iterator 是工作在一个独立的线程中,并且拥有一个 mutex 锁. Iterator 被创建之后会建立一个指向原来对象的单链索引表,当原来的对象数量 ...