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

//闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进行冲突
( 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. MySQL单表多字段模糊查询

    今天工作时遇到一个功能问题:就是输入关键字搜索的字段不只一个字段,比如 我输入: 超天才 ,需要检索出 包含这个关键字的 name . company.job等多个字段.在网上查询了一会就找到了答案. ...

  2. 解决spring的bean同名冲突

    今天工作发现当不同模块下有相同bean然后又被同一个模块引用的话就会导致bean同名冲突,如下: 解决方案很简单,如果是xml配置直接修改bean的名称即可,如果是注解形式修改如下: 只要在servi ...

  3. 基于阿里云 DNS API 实现的 DDNS 工具

    0.简要介绍 0.1 思路说明 AliDDNSNet 是基于 .NET Core 开发的动态 DNS 解析工具,借助于阿里云的 DNS API 来实现域名与动态 IP 的绑定功能.工具核心就是调用了阿 ...

  4. 解决ionic <ion-nav> rootParams获取不到参数

    在使用ion-nav 标签的时候 设置的页面 无法拿到传递的参数 import { Component } from '@angular/core'; import { GettingStartedP ...

  5. 《C++ Primer Plus 第6版》学习笔记

    第三章.基本数据类型 整形 short:至少16位 int:至少与short一样长 long:至少32位,且至少与int一样长 long long:至少64位,且至少与long一样长 字符类型 cha ...

  6. java设定一个日期时间,加几分钟(小时或者天)后得到新的日期

    //返回的是字符串型的时间,输入的 //是String day, int x public static String addDateMinut(String day, int x){ SimpleD ...

  7. 《HelloGitHub月刊》第 03 期

    <HelloGithub>第03期 兴趣是最好的老师,而<HelloGitHub> 就是帮你找到兴趣! 因为我比较熟悉python语言,所以月刊中python语言的项目居多,个 ...

  8. HttpSessionListener的用法

    Session创建事件发生在每次一个新的session创建的时候,类似地Session失效事件发生在每次一个Session失效的时候. 这个接口也只包含两个方法,分别对应于Session的创建和失效: ...

  9. 从前端界面开发谈微信小程序体验

    本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...

  10. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...