图片加载完成后执行相应功能

本文主要是介绍图片加载完成后执行相应功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片异步加载

1.计时器异步加载（缺点很明显，不知道图片加载时长，受网络影响）

$(function(){setTimeout(function(){console.log(document.getElementById("image").complete)// function},1000)
})

2.image标签onload属性（简单）

<img src="./long.png" id="image" onload="handleLoad()">

function handleLoad () {console.log("完成")console.log(document.getElementById("image").height)// function
}

3.使用Promise对象（高级）

$(function(){loadImageAsync()
})function loadImageAsync () {return new Promise(function(resolve, reject) {let image = document.getElementById("image")image.onload = function(){console.log("完成")console.log(document.getElementById("image").height)// functionresolve(image)}image.onerror = function() {reject(new Error('Could not load image'));}})
}

这篇关于图片加载完成后执行相应功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---