图片预加载的插件使用-jquery.imgpreload.min.js
使用方法:
//图片预加载
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的更多相关文章
- 闭包,jQuery插件的写法:图片预加载
最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 【JQuery Zepto插件】图片预加载
屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 图片预加载插件 preLoad.js
1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- jquery实现图片预加载提高页面加载速度
使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...
随机推荐
- 2013年各大小IT公司待遇,绝对真实,一线数据!(初版)
本人西电硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献给各位学弟学妹,公司比较全,你想去的公司不在这里面,基本上是无名小公司了:无名小公司有时也很给力哦以下绝对是各大公 ...
- Build Telemetry for Distributed Services之OpenCensus:Tracing2(待续)
part 1:Tracing1 Sampling Sampling Samplers Global sampler Per span sampler Rules References
- MapReduce\Tez\Storm\Spark四个框架的异同
1) MapReduce:是一种离线计算框架,将一个算法抽象成Map和Reduce两个阶段进行 处理,非常适合数据密集型计算. 2) Spark:MapReduce计算框架不适合迭代计算和交互式计算, ...
- 一种可以避免数据迁移的分库分表scale-out扩容模式
转自: http://jm.taobao.org/ 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星 ...
- ubuntu 18.04安装mysql 8
wget -c https://dev.mysql.com/get/mysql-apt-config_0.8.10-1_all.deb sudo dpkg -i mysql-apt-config_0. ...
- ADFS RelayState
https://blogs.technet.microsoft.com/askds/2012/09/27/ad-fs-2-0-relaystate/ 什么是RelayState,我为什么要关心?有两种 ...
- AWS 云产品 CloudFront + ELB + EC2 + S3 构建虚拟主机动+静分离站点
目录 一.架构图 二.实现步骤 2.1.EC2 配置 2.2.ELB 设置 2.2.1.创建目标组 2.2.2.创建负载均衡器 2.3.S3 设置 2.4.CloudFront 分配 2.4.1.创建 ...
- 浅出讲解:php的socket通信
原文地址:https://www.cnblogs.com/aipiaoborensheng/p/6708963.html 对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发 ...
- tp5博客项目实战1
tp5博客项目实战 开发准备:环境wamp,windows系统为例.看实战博客,默认会搭建开发环境并且tp5框架已经至少有一定的基础. tp5的下载与安装 方法一:直接在官网下载拷贝到wamp你的项目 ...
- Dapper操作Sql Server和MySql数据库
1. 在配置文件web.config中添加连接字符串 <connectionStrings> <add name="sqlconnectionString" co ...