zoukankan      html  css  js  c++  java
  • 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     海涛
     * */
  • 相关阅读:
    EXCEL每次打开文件都会出现一个空白sheet1窗口
    Python基础知识之面向对象编程
    Python基础知识之模块详解
    Python基础知识之正则表达式re模块
    Python基础知识之xml模块
    Python基础知识之json&pickle模块
    Python基础知识之装饰器
    VUE-02
    VUE
    虚拟环境的搭建
  • 原文地址:https://www.cnblogs.com/haitaoblog/p/5413487.html
Copyright © 2011-2022 走看看