一、背景

我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题。

比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者闪屏;

二、Preload插件实现

/**
* 图片预加载插件Preload
*
* @param array imgs 预加载的图片地址数组列表
* @param Object options 配置参数
*/ (function ($) {
function Preload(imgs, options) {
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.options = {
order: false, //默认值false,代表无序加载
minTimer: 0, //完成加载的最少时间,单位ms,默认为0,一般展示类型的loading动画会需要设置
each: null, //单张图片加载完执行的方法,一般是修改进度状态
end: null //所有图片加载完执行的方法,一般是隐藏loading页
};
this.timer = Date.now();
this.init(options);
};
//插件初始化
Preload.prototype.init = function (options) {
//配置参数合并
this.options = $.extend(this.options, options);
if (this.options.order) {
this.ordered(); //有序加载
} else {
this.unordered(); //无序加载
}
};
// 有序加载
Preload.prototype.ordered = function () {
var that = this,
imgs = this.imgs,
len = imgs.length,
count = 0,
options = this.options;
load(); function load() {
var img = new Image();
$(img).on('load error', function () {
options.each && options.each(count);
if (count >= len-1) {
//所有图片加载完毕,检查是否满足最小loading时间
var timerCount = Date.now() - that.timer;
if (timerCount < options.minTimer) {
var timeout = options.minTimer - timerCount;
setTimeout(function () {
options.end && options.end();
}, timeout);
}else{
options.end && options.end();
}
} else {
load();
}
count++ });
// onload函数要写在改变src前,这样确保了onload函数一定会被调用 img.src = imgs[count];
}
};
// 无序加载
Preload.prototype.unordered = function () {
var that = this,
imgs = this.imgs,
len = imgs.length,
count = 0,
options = this.options;
for (var i = 0; i < len; i++) {
var img = new Image();
$(img).on('load error', function () {
options.each && options.each(count);
if (count >= len-1) {
//所有图片加载完毕,检查是否满足最小loading时间
var timerCount = Date.now() - that.timer;
if (timerCount < options.minTimer) {
var timeout = options.minTimer - timerCount;
setTimeout(function () {
options.end && options.end();
}, timeout);
}else{
options.end && options.end();
}
}
count++;
})
img.src = imgs[i];
}
};
//扩展到jQuery对象上
$.extend($,{
preload: function (imgs, options) {
new Preload(imgs, options);
}
});
})(jQuery);

三、用法:

1、引入上面的插件js,可以自己定义一个js文件名字。

2、执行如下代码

imgs是你罗列的需要传入的需要预加载图片的数组集合。

//图片预加载
$.preload(imgs, {
  order:false, //true代表有序加载,默认为false无序加载
each: function (count) {
     //per为此时加载的百分比
let per = Math.round((count+1) / len * 100) + '%';
}, end: function () { 
  //这里代表加载完毕的执行代码
  $('.loading').hide();
  }
});

转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!的更多相关文章

  1. jQuery PC端图片预览,鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery简单实现图片预加载

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?下面我来介绍一种在实际应用中经常会使用到的js预加载的方法. ...

  3. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  4. 转载:jquery插件实现图片延迟加载(lazyload.js)

    转载: http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html

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

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

  6. 图片预加载插件 preLoad.js

    1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...

  7. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  8. 插件化开发—动态加载技术加载已安装和未安装的apk

    首先引入一个概念,动态加载技术是什么?为什么要引入动态加载?它有什么好处呢?首先要明白这几个问题,我们先从 应用程序入手,大家都知道在Android App中,一个应用程序dex文件的方法数最大不能超 ...

  9. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

随机推荐

  1. Ubuntu 18.04.1 LTS + kolla-ansible 部署 openstack Rocky all-in-one 环境

    1. kolla 项目介绍 简介 kolla 的使命是为 openstack 云平台提供生产级别的.开箱即用的自动化部署能力. kolla 要实现 openetack 部署分为两步,第一步是制作 do ...

  2. LINQ 常规实践总结

    1.Linq 执行多列排序 OrderBy的意义是按照指定顺序排序,连续两次OrderBy,后面一个有可能会打乱前面一个的排序顺序,可能与预期不符. 要实现sql中的order by word,nam ...

  3. 老毛桃pe安装系统

    1.准备一个空白U盘,插入电脑. 2.下载老毛桃pe 3.下载完成后,打开老毛桃,默认制作成系统盘,傻瓜操作,无需修改参数 4.打开浏览器,下载要安装的系统 www.msdn.itellyou.cn ...

  4. HTTP 内容编码,也就这 2 点需要知道 | 实用 HTTP

    Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header)和实体组成.大多数 Http 协议的使用方式,都 ...

  5. AssetsUtils【读取assets、res/raw、./data/data/包名/目录下的文件】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装了以下功能: 1.读取assets目录下的资源html.文件.图片,将文件复制到SD卡目录中: 2.读取res/raw目录下的文 ...

  6. Python+requests+unittest+excel实现接口自动化测试框架

    一.框架结构:  工程目录 二.Case文件设计 三.基础包 base 3.1 封装get/post请求(runmethon.py) import requests import json class ...

  7. Java中的基本类型转换,数据溢出原理

    java中的数据类型 java是一种强类型语言,在java中,数据类型主要有两大类,基本数据类型和引用数据类型,不同的数据类型有不同的数据存储方式和分配的内存大小. 基本数据类型中,各数据类型所表示的 ...

  8. 第一节: dingo/API 最新版 V2.0 之安装讲解(连载)

    我发现关于dingo/API V2.0的资料少之又少,应该也是发布时间不久的原因.下面,我就来给大家讲解(翻译)下官方的英文文档,如果有说的不对的地方,请指正.先附上,官网wiki地址https:// ...

  9. .Net—反射

    在学习反射之前,先来理解以下几个概念. 1.什么是程序集? 程序集是.net中的概念. .Net中的dll文件与exe文件都是程序集.(exe与dll的区别?) exe文件是可执行文件,有执行入口.可 ...

  10. 数据结构——Java实现顺序栈

    一.分析 栈是限定仅在表的一端进行插入或删除操作的线性表,对于栈来说,操作端称为栈顶,另一端则称为栈底,栈的修改是按照后进先出的原则进行的,因此又称为后进先出的线性表. 顺序栈是指利用顺序存储结构实现 ...