zoukankan      html  css  js  c++  java
  • 本地图片的预加载

    以往加载图片都是在网络上预加载图片,但是有的时候只是个展示类的页面,图片都保存在本地了,由于图片没有加载上会暂时出现白屏的情况,于是,预加载本地图片就成了必然了,为了更好的用户体验。。

    $(document).ready(function(){
    	var beforeOnLoad = document.getElementsByClassName("beforeOnLoad")[0];
    	var onLoad = document.getElementsByClassName("onload")[0];
    	
    	onLoad.style.display = "none";
    	
    	var imgArray = ["image/1.jpg","image/2.jpg","image/3.jpg"];
    	var imgArrayLen = imgArray.length;
    	var count = 0;
    	var xxxImgArray = [];
    	for (var i = 0; i < imgArrayLen; i++) {
    		xxxImgArray[i] = new Image();
    		xxxImgArray[i].src = imgArray[i];
    		
    		xxxImgArray[i].onload = function(){
    			count++;
    			if(count == imgArrayLen){
    				zzz();
    			}
    		}
    	}
    	//记录开始加载图片时的时间
    	var beforeTime = (new Date()).getTime(); 
    	
    	function zzz(){
    		//记录图片加载完的时间
    		var afterTime = (new Date()).getTime();
    		if(afterTime - beforeTime >= 1000){
    			xxx();
    		}else{
    			setTimeout(function(){
    				xxx();
    			},1000-(afterTime - beforeTime))
    		}
    		
    	}
    	
    	function xxx(){
    		onLoad.style.display = "block";
    		beforeOnLoad.style.display = "none";
    	}
    })
    

      只有当本地图片加载好之后,才会展现真正的页面了

                    div class="beforeOnLoad">
    		    在加载图片时候显示的页面	
    		</div>
    		<div class="onload">
                         展示页面内容
                    </div>    
    

      这就轻松搞定了。。

  • 相关阅读:
    flexible
    arcgis
    vue 语法糖
    sass 的安装 编译 使用
    nodeJs
    微信小程序
    linux cgroups 简介
    git命令
    sublime笔记
    工程优化学习(进退法、黄金分割法、二次插值法、三次插值法、最速下降法)
  • 原文地址:https://www.cnblogs.com/wanglaowu/p/6491217.html
Copyright © 2011-2022 走看看