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

2024年4月8日 254次阅读 来源: Qian_mos

预加载
预加载：提前加载好资源，当需要时可以直接从本地缓存中渲染，有助于提升网页性能体验。
实现方式：
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

    原文作者：Qian_mos
    原文地址: https://blog.csdn.net/Qian_mos/article/details/85783911
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞