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实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- 解密UML九中关系
将UML中经常使用的九种关系分为了四组进行解释. 一.组合和聚合解说: 同样:均是指有部分组成总体. 不同:聚合是指能够独立存在的个体组成总体.(弱的拥有关系) 组合存在时间上的关系.总体和部分具有同 ...
- hdu4893Wow! Such Sequence! (线段树)
Problem Description Recently, Doge got a funny birthday present from his new friend, Protein Tiger f ...
- c++Socket 异步通讯
在网络通讯中,由于网络拥挤或一次发送的数据量过大等原因,经常会发生交换的数据在短时间内不能传送完,收发数据的函数因此不能返回,这种现象叫做阻塞. Winsock对有可能阻塞的函数提供了两种处理方式:阻 ...
- ios内存详解
IOS以及Mac os都是基于Unix/linux改造出来的,而在内存管理方面也沿用了Unix/Linux的内存管理机制. 下面主要说的是IOS系统,有很多比较喜欢捣鼓的吧友肯定自己清理过机器的内存, ...
- zookeeper初体验之关于解决quartz重复执行任务的一种思路
前阵子工作中遇到了一个很麻烦的问题.本人所在的项目组做了一个机遇quartz集群的任务系统.通俗点讲就是用quartz框架(quartz是一款能跑定时任务的框架支持复杂的时间表达式)来执行定时任务.但 ...
- 更换ios 开发者账号与下载别人的代码 真机调试时注意切换
Buid Setting search sign
- sass基础学习
2015.6.281.安装ruby2.运行gem安装sass-->gem install sass3.编译命令行sass --watch 文件路径/test.scss:编译后文件路径/test. ...
- 菜鸟做HTML5小游戏 - 翻翻乐
记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...
- quartz spring 时间配置
关于时间配置, 1前面带0和不带0的区别是??? (开始时间,带0以整点整分整秒开始,不带的以启动时间定时循环??) 比如 0 7/37 * * * ? 表示每个小时的第7分钟开始执行,然后隔三 ...
- CSAPP--优化程序性能
一.编写高效的程序: 1.选择合适的算法和数据结构. 2.编写出编译器能够有效优化以转换为高效可执行的源代码. 3.并行计算.当然重点还是第一个,良好的算法和数据结构大大减小了程序的时间复杂度. 二. ...