最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的。

//闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进行冲突
( function (通过它来接收对象) {
 
} )( 通过它来传递对象 );
 
//可以使用jQuery的$符号的闭包插件的写法:
//写插件的常用方法 $.extentd() (function ($){
//构造函数
function PreLoad(imgs,options){
this.imgs = (typeOf === 'string') ? [imgs] : imgs;
//生成一个新的对象,将后一个覆盖前一个返回一个新对象
this.opts = $.extend({},PreLoad.DEFAULTS, options); //无序加载方法,方法加下划线表明这个方法只在内部使用
this._unoredered(); }
//定义默认参数,如果没有传过来参数,可以使用
PreLoad.DEFAULTS = {
each: null, //方法,每一张加载完毕后执行
all: null //所有图片加载完毕后执行
} //面向对象的方法都写在原型上,可以比较方法的实例化
PreLoad.prototype._unoredered = function(){
//无序加载 var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.lenght; $.each(imgs, function(i,src){
//判断src是否为字符串,如果不是,就直接返回
if(typeof src != 'string') return;
var imgObj = new Images(); //load 全部加载完 error 有发生错误时
$(imgObj).on('load error',function(){
//判断 opts是否存在,每一次加载的图片数量 count
opts.each && opts.each(count); if(count >= len - 1){
//如果 opts.all存在就去执行它
opts.all && opts.all();
}
count ++;
});
//把src给img对象中的src赋值
imgObj.src = src;
});
}; //上面是插件中的方法已经写完了,下面是怎么把上面的方法变为一个可用的插件
//调用方法一般有两种
//附在$.fn后面
//$.fn.extend -> $('#id').preload();
//另一种是跟在jQuery对象上的,它的形式就是个工具函数,常用的也是这种工具函数
//$.extend -> $.preload();
//这个插件按标准来应该这样写 $.extend({
//插件名称及传递的参数,这样这个插件就完写了
preload: function(imgs, opts){
//实例化构造函数,并将参数传递进来
new PreLoad(imgs, opts);
}
});
})(jQuery);</script>

如何使用它呢?

//调用这个插件
<script>
var = imgs = [
'1.jpg',
'2.png',
'3.jpg'
]; //给插件传递参数,一个为数组,另一个为一个参数列表
$.preload(imgs, {
//每加载完一张图片之后执行的方法
each: function(count){
//每一次都需要更新一次加载进度
$progress.html(Math.round((count + 1) / len * 100 + '%');
},
//所有图片加载完毕后执行的方法
all: function(){
//loading 隐藏,另,加载的图片数量显示
$('.loading').hide();
document.title = '1/' + len;
}
})
</script>

可以直接拿来用!

闭包,jQuery插件的写法:图片预加载的更多相关文章

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

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

  2. 图片预加载的插件使用-jquery.imgpreload.min.js

    使用方法: //图片预加载 var the_images = [];//新建一个数组,然后将要加载的图片地址推入这个数组中: the_images.push( 'bg.jpg' ); var load ...

  3. 【JQuery Zepto插件】图片预加载

    屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...

  4. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

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

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

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

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

  7. jquery实现图片预加载

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

  8. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

  9. js 函数的多图片预加载(preload) 带插件版完整解析

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

随机推荐

  1. html标签详解(1)

     http标签详解及讲解        1.基础标签 <!DOCTYPE html> <!--表示文本类型--> <html> <!--<html> ...

  2. 【Guava】使用Guava的RateLimiter做限流

    一.常见的限流算法 目前常用的限流算法有两个:漏桶算法和令牌桶算法. 1.漏桶算法 漏桶算法的原理比较简单,请求进入到漏桶中,漏桶以一定的速率漏水.当请求过多时,水直接溢出.可以看出,漏桶算法可以强制 ...

  3. 【转载】uCOS系统的思考

    一:  世界潮流,浩浩汤汤,顺之者昌,逆之者亡---孙中山 从80X86到ARM9,再从ARM9到ARM7,平台是越做越简单,但是简单并不是意味着退步,反而是种潮流趋势... 在CISC道路上渐行渐远 ...

  4. Docker 构建映像

    .用docker commit构建映像 .docker run -i -t centos /bin/bash //启动一个容器,启动后默认进入该窗口的bash进程 .yum install -y ep ...

  5. spring boot面试问题集锦

    译文作者:david  原文链接:https://www.javainuse.com/spring/SpringBootInterviewQuestions Q: 什么是spring boot? A: ...

  6. 翻译:SELECT INTO语句(已提交到MariaDB官方手册)

    本文为mariadb官方手册:SELECT INTO的译文. 原文:https://mariadb.com/kb/en/selectinto/我提交到MariaDB官方手册的译文:https://ma ...

  7. 如何用golang获取linux上文件的访问/创建/修改时间

    在linux上想获取文件的元信息,我们需要使用系统调用lstat或者stat. 在golang的os包里已经把stat封装成了Stat函数,使用它比使用syscall要方便不少. 这是os.Stat的 ...

  8. 跨域学习笔记1--跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  9. 【转载】ASP.NET实现文件下载的功能

    文件下载是很多网站中含有的常用功能,在ASP.NET中可以使用FileStream类.HttpRequest对象.HttpResponse对象相互结合,实现输出硬盘文件的功能.该方法支持大文件.续传. ...

  10. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...