图片预加载之模拟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插件的写法:图片预加载
最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...
随机推荐
- [认证授权] 4.OIDC(OpenId Connect)身份认证授权(核心部分)
0 目录 认证授权系列:http://www.cnblogs.com/linianhui/category/929878.html 1 什么是OIDC? 看一下官方的介绍(http://openid. ...
- CSS3用法理解
这里只概括了我对CSS3各属性的用法理解.具体每个属性的值,以及例子,看这里 (竟然每篇文章不能低于200字,不能低于200字不能低于200字不能低于200字不能低于200字....请无视)
- python 之走坑的道路
### python之 继续走函数的坑 上篇文章简单介绍了函数的一些简单的使用,这次继续踩函数的坑1.函数对象 函数其实也可以当做一个参数传给另一个函数,也可以使用赋值的方式来给另一个,而且这两个的内 ...
- java7增强的try语句关闭资源
java7增强的try语句关闭资源 传统的关闭资源方式 import java.io.FileInputStream; import java.io.FileOutputStream; import ...
- 搭建arm交叉工具链
1.将arm-linux-gcc-4.4.3压缩包,拷到home/armtoolchain下,进行压缩. 2.压缩命令:tar -xzvf arm-linux-gcc-4.4.3.tgz,解压后得到了 ...
- PHPstrom的Disable Power Save Mode
1.安装好phpstorm之后 发现代码高亮和函数自动提示都失效了 网上有人说可能是Power save mode的原因开始没找到这个设置在哪 后来在底部面板的信息提示处发现有一条系统消息: 17:0 ...
- 禁止windows10带来的三大隐患问题
毫无疑问的说.windows10是目前windows发布的最好版本之一,最重要的是其“免费”了.这几天在互联网上,win10有太多的争议了,尤其是你在享受免费的同时,隐私也正在流向微软公司的服务器.. ...
- 依赖注入之Autofac使用总结
依赖倒置?控制反转(IOC)? 依赖注入(DI)? 你是否还在被这些名词所困扰,是否看了大量理论文章后还是一知半解了? 今天我想结合实际项目,和正在迷惑中的新手朋友一起来学习和总结依赖注入Autofa ...
- JavaScript函数之递归
递归 递归的本质就是使用函数自身来解决问题的思路. 递归的定义(摘): 程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明 ...
- 一个编程菜鸟的进阶之路(C/C++)
学编程是一条不归路,但我义无反顾.只能往前冲,知道这个过程是痛苦的,所以我开通这个博客,记录自己在编程中遇到的问题和心得,一是希望可以帮助跟我一样遇到同样问题的人,二是把这作为对自己的勉励及回忆: