html5 app图片预加载
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图片预加载的更多相关文章
- Javascript实现图片预加载【回调函数,多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
- Javascript兑现图片预加载【回调函数,多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
- AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...
- vue图片预加载
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 一.方法一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- 浅谈C++中的那些内存泄露
尽管学过C语言.可是C++里面的一些基础还是不太懂,还须要再掌握. 老范也開始要讲C++设计模式了,必须快点看了.不然就要白花窝滴钱了. 对于内存泄露,我的个人理解就是程序在执行过程中,自己开辟了空间 ...
- 通过数组初始化链表的两种方法:指向指针的引用node *&tail和指向指针的指针(二维指针)node **tail
面试高频题:单链表的逆置操作/链表逆序相关文章 点击打开 void init_node(node *tail,char *init_array) 这样声明函数是不正确的,函数的原意是通过数组初始化链表 ...
- auto and static key words
---恢复内容开始--- 对堆栈怎样实现函数调用的描述也同时解释了为什么不能从函数中返回一个指向该函数局部自动变量的指针,例如: 当进入该函数时,自动变量deciduous在堆栈中分配.但函数结束后, ...
- 函数返回char* 的解决方案
在C语言中,自动变量在堆栈中分配内存.当包含自动变量的函数或代码块退出时,它们所占用的内存便被回收,它们的内容肯定会被下一个所调用的函数覆盖.这一切取决于堆栈中先前的自动变量位于何处,活动函数声明了什 ...
- tomcat程序记录客户端真实IP
需求: 开发告知:让后端tomcat日志获取真实的IP,而不是nginx 服务器的IP tomcat前面是nginx做的反向代理,所以tomcat取到的是nginx的ip. 日志名称是localhos ...
- android上line-height的问题
关于line-height大家应该非常熟悉了吧,就是用来做垂直居中的,屡试不爽,基本上没有什么问题,但是最近一个项目,测试提了一个bug,看图吧. 从别处窃的图,这个问题只有安卓上才能复现,做了dem ...
- Oracle数据库中的blob类型解析
Oracle的Blob字段比较特殊,他比long字段的性能要好很多,可以用来保存例如图片之类的二进制数据. 写入Blob字段和写入其它类型字段的方式非常不同,因为Blob自身有一个cursor,你必须 ...
- linux下enum的使用
enum T { status1, status2, } Linux下: 1.做函数返回值时enum T f():不能写成T f(): 2.if(i == status1)不能写成 if(i == T ...
- JSONP的客户端的具体实现
JSONP的客户端的具体实现 1.远程调用一个js,代码如下: <script type="text/javascript"> var ...
- C#必须掌握的系统类
系统类 Type类,Object类,String类, Arrary类,Console类, Exception类,GC类, MarshalByRefObject类, Math类. DateTime结构 ...