function Laimgload(){}  //图片预加载JS
Laimgload.prototype.winHeight = function(){ //计算页面高度
var winHeight = 0;
//获取窗口高度
if (window.innerHeight){
winHeight = window.innerHeight;
}else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
return winHeight;
}
Laimgload.prototype.loadImg = function(arr){ //图片预加载执行
for( var i = 0,len = arr.length; i < len; i++){
if(arr[i].getBoundingClientRect().top-this.winHeight() < document.documentElement.clientHeight && !arr[i].isLoad){
arr[i].isLoad = true;
arr[i].style.cssText = "transition: ''; opacity: 0;";
if(arr[i].dataset){
this.aftLoadImg(arr[i],arr[i].dataset.original);
}else{
this.aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
}
(function(i){
setTimeout(function(){
arr[i].style.cssText = "transition: 1s; opacity: 1;"
},16)
})(i);
}
}
}
Laimgload.prototype.aftLoadImg = function(obj,url){ //图片地址切换
var oImg = new Image();
oImg.src = url;
if(oImg.complete){
obj.src = oImg.src;
}else{
oImg.onload = function() {
obj.src = oImg.src;
};
}
} _laimgload = new Laimgload(); /* 图片预加载JS
* 把图片<img src="这里放加载中的小图" data-original="这里放图片的路径"/> 然后获取图片集合传入下面调用函数中 获取图片集合jQuery方法 $("#content_id").find("img");
* 调用方法: _laimgload.loadImg("这里传图片集合");
* @author 海涛
* */

html5 app图片预加载的更多相关文章

  1. Javascript实现图片预加载【回调函数,多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

  2. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

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

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

  4. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  5. vue图片预加载

    目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 一.方法一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程 ...

  6. Javascript图片预加载详解

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

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

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

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

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

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

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

随机推荐

  1. VC用OLE方式读写Excel

    前几天要做一个项目,需要读取Excel中的数据.从网上查资料发现,主要是有两种方式.一是把Excel表当成数据库使用ODBC读写,这样操作起来就跟操作Access数据库似的.但这种方式效率比较低.另一 ...

  2. Hadoop-2.2.0中文文档—— Common - CLI MiniCluster

    目的 使用 CLI MiniCluster, 用户能够简单地仅仅用一个命令就启动或关闭一个单一节点的Hadoop集群,不须要设置不论什么环境变量或管理配置文件. CLI MiniCluster 同一时 ...

  3. MySQL数据库中的哈希加密

    数据库安全是数据库中最为重要的环节,只有确保了数据库中数据的安全,才能够更好的发挥数据库的功能,本文将为大家介绍一种很好的数据库加密方法,即哈希加密. 导读:MySQL数据库加密的方法有很多种,不同的 ...

  4. 使用const 提高函数的健壮性

    1.如果输入参数采用“指针传递”,那么加const 修饰可以防止意外地改动该指针指向的内存单元,起到保护的作用. 例如:void StringCopy(char *strDest, const cha ...

  5. LDAP缓存命令

    启动cacao及实例: [root@rusky bin]# cd /home/ldap/iamldap/dsee6/cacao_2/cacao/bin [root@rusky bin]# ./caca ...

  6. springmvc的讲解

    概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Spring 2.5 又为 Spring MVC 引入了注解驱动功能.现在你无须让 Controller 继承任何接口,无需在 ...

  7. Discuz!NT 3.5.2正式版与Asp.net网站会员信息整合

    Discuz!NT 提供了很多对外的接口利于与别的网站进行整合,经本人亲测,觉得开放的接口还是挺到位的.开发.测试一次通过,只不过api文档寻找无门,只能自己琢磨,费了不少周折,不过,功夫不负有心人, ...

  8. C#list泛型集合

    //创建list泛型集合 List<int> ilist = new List<int>(); ilist.Add(); ilist.Add(); ilist.AddRange ...

  9. 读书笔记_Effective_C++_条款十五:在资源类管理类中提供对原始资源的访问

    void f(int* a) { cout <<* a << endl; } int main() { shared_ptr<int> p(new int(3)); ...

  10. POJ 3630 , HDU 1671 Phone List - from lanshui_Yang

    这道题也是一道找前缀的问题,很自然地要用到Trie树,但是如果用动态Trie树(即用指针开辟内存)的话,虽然在HDU上可以过(可能是HDU的数据比较水),但在POJ上会TLE , 所以这道题只能用静态 ...