越来越懒了-图片预加载插件

wocacaca
wocacaca 发布于 2015-11-04 11:03:25 浏览:2645 类型:原创 - 随笔 分类:JavaScript - 小demo 二维码: 作者原创 版权保护
感觉自己最近越来越懒散了,一直没有好好的写过什么东西。正好前几次的项目都是h5页面,基本都是使用swiper插件和css3动画来完成。效果就类似易企秀生成的页面效果。不过这类页面一般都一个特点,那就是页面中有大量的图片,如果图片压缩不到位或者网络欠佳,很可能就会出现页面已经开始动画,但是图片没有加载完全的情况。

    为了避免这类情况,不得不去调用一个预加载插件,这里,我简化了之前同事写的一个图片预加载插件。
代码如下:

       
// JavaScript Document
	var IMGPATH = "image/" //图片路径前缀 方便控制图片路径
	//图片名称数组
	var IMG = [
	    "bg1-2.jpg",
	    "bg1-3.jpg",
			"bg1-4.jpg",
			"bg1-5.jpg",
			"bg2-1.jpg",
			"bg2-2.jpg",
			"bg2-3.jpg",
			"bg2-4.jpg",
			"bg3-1.jpg",
			"bg3-1.jpg",
			"bg4-1.jpg",
			"bg6-1.jpg",
			"bg6-2.jpg",
			"bg6-3.jpg",
			"bg6-4.jpg",
			"bg6-5.jpg",
			"bg5.jpg",
			"about.jpg",
			"back.png",
			"chanye.jpg",
			"connect.jpg",
			"fengcai.jpg",
			"home.jpg",
			"icons.png",
			"icons2.png",
			"index_bg.jpg",
			"jtgk.png",
			"link.jpg",
			"li-on.png",
			"logo.png",
			"logo-bg.png",
			"logo-bg1.png",
			"logo-bg2.png",
			"map.jpg",
			"pic1.jpg",
			"pic2.jpg",
			"pic3.jpg",
			"pic4.jpg",
			"pic5.jpg",
			"pic6.jpg",
			"pic7.jpg",
			"pic8.jpg",
			"pp.png",
			"tab-active.png",
			"tabhead.png",
			"tabhead2.png",
			"tab-liac.png",
			"tab-libg.png",
			"title-bg.png",
			"txt1.png",
			"txt2.png",
			"txt-tle.png",
			"up.png",
			"up2.png",
			"asdfaw.jpg"
	];


	function preImg(fn){
		this.init(fn);
	}

	preImg.prototype.init = function(fn){
		var path = IMG;
		for(var i = 0; i<IMG.length;i++){
			path[i] = IMGPATH + path[i];
		}	
		this.isLoaded(path,fn);
	}

	preImg.prototype.isLoaded = function(imgArr,fn){
		var arr = imgArr,
			length = arr.length,
			img = [],
			 n = 0,
			 error = 0;
		for(var i=0;i<length;i++){
			img[i] = new Image();
			img[i].src = arr[i];
			img[i].onload = function(){
				n++;	
				if(n==length){
					console.log("加载完毕",length);
					fn();	
				}	
			}
			img[i].onerror = function(){
				n++;
				error++;	
				if(n==length){
					console.log("加载完毕但是有"+error+"张图加载失败!");
					fn();
				}
			}	
		}	
	}


    其实思路很简单,就是先将需要加载的图片写在一个数组里,然后对这个数组进行遍历,每遍历一次都new一个Image对象,并将它的src设置为当前数组元素的值(这个值其实就是图片的路径)。然后再该image对象的onload事件里进行计数,每onload成功一张图片,n的数量就+1,当然,我们不能排除由于网络问题或者路径写错的情况下图片加载失败。因此如果image加载失败,也就是onerror的时候,n的数量也要自+1,这样在接下来判断n是否等于数组长度的时候就不会出错,导致后续回掉函数无法执行的情况。

    该插件使用方法也比较简单,由于使用了prototype来新增方法,所以在使用时要new一个preImg()函数。
  如下:
       
       
var preImgLoad = new preImg(function(){
			//这里是回调函数内容
		});
  


    这里的回掉函数,将会在IMG数组里的所有图片加载完成之后执行。

    原谅我用如此贫瘠的语言和肤浅的代码讲完这篇笔记,哈哈哈。

    对了,个人主页域名已变: http://mikoshu.me  博客:http://mikoshu.me/blog
z
给个赞 7 人点赞
收藏 11 人收藏
评论 已有 6 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
fants613
fants6132015-11-25 11:39:516F
写的不错,但是在项目中用估计就不够了,swiper自带的有图片预加载,可以通过参数配置实现,而且还有一些比较不错的图片预加载插件如preloader,在项目中使用起来都很方便的
举报 支持 (0) 回复 (0)
夏天锝竹影
夏天锝竹影2015-11-20 17:48:465F
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2015-11-09 18:17:134F
问题是如果一次要预加载很多张图片,不就要改写法了么
举报 支持 (0) 回复 (0)
xjglvzy
xjglvzy2015-11-09 13:30:563F
给你用代理模式实现图片预加载
var myImage = (function(){
                        var imgNode = document.createElement('img');
                        document.body.appendChild(imgNode);

                        return {
                              &nbs
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2015-11-09 10:51:302F
  
举报 支持 (0) 回复 (0)
vivien7
vivien72015-11-06 15:14:491F
简单粗暴,才最有效
举报 支持 (0) 回复 (0)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新