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实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- [置顶] Android的IPC访问控制设计与实现
3.3.1 IPC钩子函数设计与实现 IPC Binder是Android最重要的进程间通信机制,因此,必须在此实施强制访问控制. 1. 修改secuirty.h 打开终端shell,输入指令“cd ...
- 关于退运美国转基因玉米含有MRI 162转基因成分的质疑
6月30日,新华社刊出文章"我国退运125.2万吨进口美国转基因玉米",读后有感. 文章说:国家质检总局办公厅副主任陆春明30日介绍,截至今年6月16日,全国出入境检验检疫机构共在 ...
- .net对文件的操作之对文件目录的操作
.NET 提供一个静态File类用于文件的操作,下面列出它的主要操作方法. 返回值类型 方法名称 说明 bool Exists(string path) 用于检查指定文件是否存在 void Copy( ...
- MVC 5 下,应用log4net收集异常信息
1.安装log4net. 首先在VS中通过nuget安装logenet,我用的是VS2013,截屏如下:
- Sql Server添加用户
1.sa用户登陆之后,在安全性中新建登录名 2.添加登录名,下面的默认数据库选择该用户可访问的默认数据库 3.服务器角色中选择public 4.用户映射中选择该用户可访问的数据库,数据库角色一般选择p ...
- HibernateTemplate常用方法总结
HibernateTemplate常用方法 (本文章内容相当于转载自:http://www.tuicool.com/articles/fU7FV3,只是整理了一下内容结构和修改了部分内容,方便阅读) ...
- debug 心得
前天做了一个题,就是个简单的状压记忆化搜索,但是debuge了俩小时,给我整的快吐血了,各种不可思议的错误,我都要怀疑是不是电脑有毛病了,后来发现数组开小了,看来以后遇到不可思议的错误就要检查数组开没 ...
- 翻译:《What can I hold you with?》—— 博尔赫斯《英文诗两首》之一。
What can I hold you with? 我拿什么才能留住你? I offer you lean streets, desperate sunsets, the moon of the ja ...
- mysql定时执行及延时执行,实现类似sql server waitfor功能
熟悉SQL Server的人都知道,它有一个很有用的功能,waitfor time和waitfor delay,前者表示在某个时间执行,后者表示等待多长时间执行.在我们测试功能和定时执行的时候特别有用 ...
- JqueryUI插件网络连接
operamasks_UI官网 http://ui.operamasks.org/website/homepage.html EasyUI官网 http://www.jeasyui.com/index ...