图片预加载的插件使用-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实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...
随机推荐
- Python 3.x 引入了函数注释
Python 3.x 引入了函数注释,以增强函数的注释功能,下面是一个普通的自定义函数: def dog(name, age, species): return (name, age, spe ...
- Windows10下Anaconda虚拟环境下安装pycocotools
0 - 步骤 安装visualcppbuildtools_full.exe(链接:https://blog.csdn.net/u012247418/article/details/82314129) ...
- 配置Apache控制浏览器端的缓存的有效期
这个非常有用的优化,mod_expires可以减少20-30%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求.但要注意更新快的文件不要这么做.这个模块控制服 ...
- JS时间转换,url编码,jquery返回类型等问题
1.当时间被转换为json格式后会被转换成 /Date(...)/ 这种格式,其中...为时间转换成妙后的一串整数 function changeDateFormat(cellval) { )); v ...
- python判断命令执行成功
if os.system('lss') !=0: print 'Without the command'
- 【Leetcode_easy】806. Number of Lines To Write String
problem 806. Number of Lines To Write String solution: class Solution { public: vector<int> nu ...
- Python3之类和实例
面向对象的重要概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如学生类Student,而实例是根据类创建出来的一个个具体的对象,每个对象都拥有相同的方法,单各自的数据可能 ...
- Centos7安装gitlab11 学习笔记之基础概念、部署安装、权限管理、issue管理
一.基础介绍 1.简介 一个基于GIT的源码托管解决方案 基于rubyonrails开发 集成了nginx postgreSQL redis sidekiq等组件 2.安装要求 2g内存以上,有点占内 ...
- CentOS系统下Tomcat的优化
一.JVM内存优化(线程优化) vim ./bin/catalina.sh 在catalina.sh文件中添加以下配置: JAVA_OPTS="-server -Xms128m -Xmx12 ...
- C语言各数据类型大小和取值范围