使用方法:

 //图片预加载
var the_images = [];//新建一个数组,然后将要加载的图片地址推入这个数组中;
the_images.push( 'bg.jpg' );
var loading_process = 0;
jQuery.imgpreload(the_images,//开始运行预加载;
{
each: function()//each的意思是,每次加载完一个图片后,执行此匿名函数中的代码,本例仅仅是将图片的地址打印到页面而已,所以大家不用纠结“为什么没有看到图片”
{
var status = $(this).data('loaded')?'success':'error';
loading_process += Math.round(100/(the_images.length));
if(loading_process<100){
$('p').html(loading_process+'%');
}
},
all: function()//all的意思是,当所有图片加载完毕之后,执行此函数体内的内容;举个例子,如果有5张图片需要预加载,则each中的function会执行5次,而all的function 只会执行一次~
{ }
}
);

图片预加载的插件使用-jquery.imgpreload.min.js的更多相关文章

  1. 闭包,jQuery插件的写法:图片预加载

    最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...

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

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

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

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

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

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

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

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

  6. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

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

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

  8. jquery实现图片预加载

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

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

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

随机推荐

  1. 004-nginx简介、安装配置【源码安装和mac安装】、基本使用

    一.概述 1.1.Nginx是什么 Nginx是一款轻量级的Web服务器,也是一款轻量级的反向代理服务器[常用]. 1.2.Nginx能干什么 Nginx能干的事情很多,这里简要罗列一些: 1:直接支 ...

  2. MySQL数据库备份之xtrabackup工具使用

    一.Xtrabackup备份介绍及原理 二.Xtrabackup的安装 1.在centos7上基于yum源安装percona-xtrabackup软件 [root@node7 ~]# yum -y i ...

  3. QML小例子【QML工程里信号与槽】

    1.效果 代码参考B站视频:https://www.bilibili.com/video/av36584062 功能:点击左边,会发出信号,右边会有个颜色动画,然后计数+1 2.分析: 一共有两个对象 ...

  4. 怎样创建一个OpenStack官方账号?

    OpenStack官方账号分两种: 社区成员 (Community Member) 基金会成员 (Foundation Member) 基金会成员比社区成员的权利多一点: 允许提交峰会议题 允许对峰会 ...

  5. python基础之知识补充-作用域、特殊语法

    python作用域 无函数的作用域 在python中没有块级作用域 什么叫块级作用域呢?先来看个例子: if 1 == 1: name= 'alex' print(name) 运行结果为alex 在j ...

  6. PAT 甲级 1058 A+B in Hogwarts (20 分) (简单题)

    1058 A+B in Hogwarts (20 分)   If you are a fan of Harry Potter, you would know the world of magic ha ...

  7. webpack简单配置

    1.代理配置 需要修改一下配置文件 config里的index.js,根据接口特点自主选取 2.解决图标显示路径错误问题 项目在打包完成后如果出现图片显示不了的问题,需要进行如下配置

  8. 解决Windows7下virtualbox安装ubuntu出现的0x00000000指令引用0x00000000内存,该内存不能为written问题

    公司电脑只能用Windows7,不能用10,也没WSL用,最近想跑个Linux环境,因为之前装docker toolbox装了virtualbox,没道理再装vmware,遂用vbox开始折腾,没想到 ...

  9. Spring 使用下列表

    模型层需要提供数据选项,设置错误信息 关键代码 @NotEmpty(message = "请选择兴趣爱好") private String[] hobbies; 控制器层需要在显示 ...

  10. canvas画箭头demo

    效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...