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     海涛
 * */
时间: 2024-10-11 12:27:37

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

HTML5页面资源预加载(Link prefetch)功能加速页面加载速度

页面资源预加载/预读取(Link prefetch)是什么?来自MDN的解释: 页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源.一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里.当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户. 简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面

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

使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就需要考虑把这个功能封装为一个通用方法. (1)下面为JS实现图片预加载方法loadImages(): Js代码   //实现一系列图片的预加载 //参数sources:图片信息关联数组 //参数callback:回调函数——图片预加载完成后立即执行此函数. function loadImages(s

【JQuery插件】图片预加载

屏幕滚动到图片当前位置加载图片,给需要预加载的图片设置一个data-url的属性即可. ;(function($){ /* 图片预加载 @author liuming @demo $('img[data-url]').ImgLoading(); */ $.fn.ImgLoading=function(){ var aImgs =$(this),/*缓存图片列表*/ $win = $(window), img,imgTop, winH = $win.height(), Timmer=null, i

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

最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进行冲突 ( function (通过它来接收对象) { } )( 通过它来传递对象 ); //可以使用jQuery的$符号的闭包插件的写法: //写插件的常用方法 $.extentd() (function ($){ //构造函数 function PreLoad(imgs,options){ th

图片预加载与图片懒加载的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

jquery实现图片预加载

使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: $.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('img').attr('src', arguments[i]); }};$.preloadImages('img/hover-on.png'

图片预加载 小案例

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

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

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.