图片预加载之模拟img.load()
function imgBatchLoad()
{
var instance = this;
this.loadCount = 0;
this.images = [];
this.imgCount = 0;
this.progress = 0;
this.load = function(pathArray)
{
instance.imgCount = pathArray.length;
for(var i=0;i<pathArray.length;i++)
{
var imgDom = new Image();
imgDom.src = pathArray[i];
imgDom.onload = updateProgress(imgDom,i);
}
};
this.onload = function()
{ };
this.onProgress = function()
{ };
function updateProgress(img,index)
{
return function(){
instance.loadCount++;
instance.images[index] = img;
instance.progress = instance.loadCount / instance.imgCount*100;
instance.onProgress(instance.progress);
if(instance.loadCount == instance.imgCount)
{
instance.onload(instance.images);
} }
}
}
图片预加载之模拟img.load()的更多相关文章
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- 用es6类封装的图片预加载技术!
1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 闭包,jQuery插件的写法:图片预加载
最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...
随机推荐
- 用border或者div制作三角形等图形
一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 具体代码如下: 通过上述代码,div的具体样式如下: 现在在上面基础上, 我们把div的宽高度都设为0时, 现在我们再次查看效果,如下图: 这时 ...
- [github项目]基于百度地图二次开发实现的车辆监管(包含车辆定位、车辆图片和方向控制,电子围栏,图形绘制等功能)前端实现(不包含后端实现)
前言:基于百度地图javascript版本开发,百度地图中所用的key已承诺仅用于测试,不用于商业用途 注:本文所有代码可以到github上进行下载,github地址:http://map.eguid ...
- (转)java web 学习之路(学习顺序)
第一步:学习HTML和CSS HTML(超文本标记语言)是网页的核心,学好HTML是成为Web开发人员的基本条件.HTML很容易学习的,但也很容易误用,要学精还得费点功夫. 随着HTML5的发展和普及 ...
- 解决Ubuntu SMPlayer播放视频无声音问题
问题:Ubuntu Kylin 14.04 系统默认装好之后,smplayer播放视频都是正常的,但最近可能由于一些误设置,导致smplayer播放任何格式的视频都无声.解决方法:由于ALSA是Lin ...
- SQL VIEW(视图)
视图是可视化的表. SQL CREATE VIEW 语句 什么是视图? 在 SQL 中,视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个 ...
- [0] MVC&MVP&MVVM差异点
MVC: 用户的请求首先会到达Controller,由Controller从Model获取数据,选择合适的View,把处理结果呈现到View上: MVP: 用户的请求首先会到达View,View传递请 ...
- ThinkPHP3.2 生成二维码
下面是整合将phpqrcode整合到TP生成二维码就可以解决这个问题了.其实也很简单,使用方法如下:先下载附件解压至ThinkPHP/Extend/Vendor目录,目录不存在自己创建. v ...
- Log4PHP 配置和使用
Log4PHP2.3.0使用解释 1. 什么是Log4PHP Log4php它为apche组织维护项目,是Log4xx系列日志组件之一,log4j在JAVA中可算是大名鼎鼎的日志开发包.Log4PHP ...
- R语言重要数据集分析研究——R语言数据集的字段含义
R语言数据集的字段含义 作者:马文敏 选择一种数据结构来储存数据 将数据输入或导入到这个数据结构中 数据集的概念 数据集通常是有数据结构的一个矩形数组,行表示规则,列表示变量. 不同的行业对数据集的行 ...
- python flask(多对多表查询)
我们在flask的学习中,会难免遇到多对多表的查询,今天我也遇到了这个问题.那么我想了好久.也没有想到一个解决的办法,试了几种方法,可能是思路的限制我放弃了,后来,我就在网上百度,可是发现百度出来的结 ...