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()的更多相关文章

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

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

  2. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  4. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  5. jquery实现图片预加载

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

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

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

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

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

  8. 用es6类封装的图片预加载技术!

    1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

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

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

随机推荐

  1. Detailed Information for Outputted Files from Somatic Mutation Annotators(annovar 注释文件条目详细解释)

    CONTENTS *_annoTable.txt (ANNOVAR) *_annoTable.txt (SnpEff) *_genelist.txt (ANNOVAR & SnpEff) db ...

  2. 搭建Elasticsearch集群常见问题

    一.ES安装方法: Linux用户登录(bae),我们用的是5.3版本的包.从官网下载: curl -L -O https://artifacts.elastic.co/downloads/elast ...

  3. jQuery插件 -- 图片随页面滚动fixed

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. storm定时任务【tick】

    一. 简介      storm作为流计算,处理数据通常以数据驱动.即只有当spout发射数据才会进行计算.那么如果想要做定时任务如何处理哪,例如有的bolt需要输出一段时间统计的结果,这里一段时间可 ...

  5. Python爬知乎妹子都爱取啥名

    闲来无事上知乎,看到好多妹子,于是抓取一波. 有没有兴趣?? 目标网址https://www.zhihu.com/collection/78172986 抓取分析 爬取分析 使用pandas操作文件 ...

  6. 转自52 梦回凉亭的她 Java常见问题,面试题

    收集整理分享# 相关概念## 面向对象的三个特征封装,继承,多态.这个应该是人人皆知.有时候也会加上抽象.## 多态的好处允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不 ...

  7. 排序与检索【UVa10474】Where is the Marble?

    Where is the Marble?  DescriptionRaju and Meena love to play with Marbles. They have got a lot of ma ...

  8. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  9. cp的用法

    1.cp的功能 拷贝一个或多个文件(或目录)到目的地 2.例子 1)一次拷贝多个源文件到目的地#cp /mnt/hgfs/DOC/{1,2,3,4,5}.txt /root/ldj 2)只拷贝链接文件 ...

  10. springmvc 之 深入核心研究

    一.前言:二.核心类与接口:三.核心流程图四.DispatcherServlet说明五.双亲上下文的说明六.springMVC-mvc.xml 配置文件片段讲解 七.如何访问到静态的文件,如jpg,j ...