预加载单张图片和多张图片的实现

预加载
预加载:提前加载好资源,当需要时可以直接从本地缓存中渲染,有助于提升网页性能体验。
实现方式:
1.CSS中的background属性来实现
-------利用CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间

#preloadImg: after{
    content: "";
    background: url(http://xxxx/xxx/img.png) no-repeat -9999px -9999px;
}

2使用JavaScript方式来实现
在JS中利用Image对象,为元素对象添加src属性,将对象缓存起来待后续使用。

<!--为img元素给一个空白图片,并添加自定义属性data-src,然后编写JS给data-src赋值 -->
<img src='blank.png' data-src='img/testBlank.png' class='testBlankpng'>
<script>
    //单张图片的预加载实现
    function preloadImg(url,callback) {
		var img = new Image();
		if(img.complete) { //Image对象属性complete用于判断图片是否已经存在于浏览器缓存里,若是存在就直接调用回调函数
		    callback.call(img);
		    return;  //图片存在缓存中时,直接调用完回调函数就返回,不去执行onload事件
		}
		img.onload = function() {
		    img.onload = null;  //防止循环引用
 		    //当不存在缓存中时,异步调用onload事件里的回调函数
 		    callback.call(img);
		}
		img.src = url;
	}
	//preLoadImg('xxxx/xx.png', function() {});  //测试用
</script>

上述代码存在一定隐患,onload事件创建了一个匿名函数,形成了闭包,并且存在循环引用,所以会导致内存泄漏。(关于图片的预加载,你所不知道的 http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html
)所以建议先onload事件,再给img.src赋值

多张图片的预加载js实现

var imgUrlArr = [
    'imgUrl1',
    'imgUrl2'
];

function preLoadImg(imgSrcUrls, callback) {
    //先对imgSrcUrls进行判断,是否是数组,若不是需要先将其转化为数组
    var imgSrcUrls = (imgSrcUrls instanceof Array)? imgSrcUrls: [imgSrcUrls];
    var imgArr = [];  //多个变量声明建议这种写法
        loadCount = 0;
        imgArrLength = imgSrcUrls.length;
	//	function getLoadCount() {}
        for(var i=0; i<imgArrLength;i++) {
			newImgUrls[i] = new Image();
			newImgUrls[i].src = newImgUrls[i];
			
			newImgUrls[i].onload =function() {
			    loadCount++;
			    if(loadCount===imgArrLength){   //此时图片已经加载完成。可以处理回调函数
			        callback();
			    }
			}
			newImgUrls[i].onerror = function() { 
				//处理无法加载成功时的处理,如用一张加载失败的图片代替显示不了的图片
				newImgUrls[i].src='../images/logoError.png';//注意图片的路径,使用小尺寸图片
				newImgUrls[i].onerror = null;  //控制不要一直跳动
			}
        }
}

图片加载失败参考:web图片加载 https://www.jianshu.com/p/2592cf9e5637
图片断网加载失败 https://www.jianshu.com/p/f63425d224b7

猜你喜欢

转载自blog.csdn.net/Qian_mos/article/details/85783911