在前端开发和生产中,需要等到页面上的图片加载完毕后,才能执行某些任务。 但是使用jquery的load函数仅仅完成了dom的执行,图片可能并没有被加载。 如果要判断图片是否加载,需要在图片标签上判断。 .使用JavaScript来确定图像已加载。 如果图像位于页面的img标签中jquery加载中,则可以使用以下命令
$('img').on('load', function() {
alert('new image loaded: ' + this.src);
});
imgNode.onload = () => {
alert('new image loaded: ' + this.src);
};
(1). 单张图片(图片在文档中)
// HTML <img id='pic' src="http://caibaojian.com/a/a3.png"> //js $(document).ready(function(){ //jquery $('#pic').load(function(){ // 加载完成 }); //原生 onload var pic = document.getElementById('pic') pic.onload = pic.onreadystatechange = function(){ if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ // 加载完成 } }; })
注意:1、IE8及以下版本不支持onload事件jquery加载中,但支持onreadystatechange事件; 2.readyState是onreadystatechange事件的一个状态。 当值加载完毕或者完成时,就表示已经加载完毕。 3.如果引入了jquery库,可以考虑直接使用jquery的loadstorm来解决兼容性问题。 (2)、单图(图片动态生成)
//js var pic = new Image() pic.src = 'http://caibaojian.com/a/a3.png' pic.onload = pic.onreadystatechange = function(){ if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ // 加载完成 } }; //jquery $('').attr('src', 'http://caibaojian.com/a/a3.png').on('load', function() { $(this).remove(); // 防止内存泄露 //图片加载完毕 });
(3)、单图像(与ES6 Promise结合)
//js new Promise((resolve, reject)=>{ let pic = new Image() pic.src = 'http://caibaojian.com/a/a3.png' pic.onload = function(){ // 加载完成 resolve(pic) } }).then((pic)=>{ //code })
(4)、多张图片
var img = [], flag = 0, mulitImg = [ 'http://caibaojian.com/a/a1.png', 'http://caibaojian.com/a/a2.png', 'http://caibaojian.com/a/a3.png' ]; var imgTotal = mulitImg.length; for(var i = 0 ; i < imgTotal ; i++){ img[i] = new Image() img[i].src = mulitImg[i] var pic = img[i]; //用jquery $(pic).on('load',function(){ $(this).remove(); flag++ if(flag==imgTotal){ //全部加载完成 } }) //原生js // img[i].onload = img[i].onreadystatechange = function(){ // if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ // //第i张图片加载完成 // flag++ // if( flag == imgTotal ){ // //全部加载完成 // } // } // }; }
(5)、多张图片(结合ES6 Promise.all())
let mulitImg = [ 'http://caibaojian.com/a/a1.png', 'http://caibaojian.com/a/a2.png', 'http://caibaojian.com/a/a3.png' ]; let promiseAll = [], img = [], imgTotal = mulitImg.length; for(let i = 0 ; i { img[i] = new Image() img[i].src = mulitImg[i] img[i].onload = function(){ //第i张加载完成 resolve(img[i]) } }) } Promise.all(promiseAll).then((img)=>{ //全部加载完成 })
如何判断背景图片是否已经加载?
$('').attr('src', 'http://caibaojian.com/a/a3.png').on('load', function() {
$(this).remove(); // prevent memory leaks as @benweet suggested
$('body').css('background-image', 'url(http://caibaojian.com/a/a3.png)');
});