I'm creating new image using
img = new Image();img.src = image_url;Then I'm assigning img.src to the img tag's src in DOM
$("#my_img").attr("src", img.src);How can I know that img.src has 100% loaded? What is the best practice?img.complete seem to me little buggy in some browsers.
So, in another words, I need to assign img.src to $("#my_img") only after img it was 100% loaded.
Thank you!
Best Answer
Use the load event:
img = new Image();img.onload = function(){// image has been loaded};img.src = image_url;Also have a look at:
- Preloading and the JavaScript Image() object
Using the Promise pattern:
function getImage(url){return new Promise(function(resolve, reject){var img = new Image()img.onload = function(){resolve(url)}img.onerror = function(){reject(url)}img.src = url})}And when calling the function we can handle its response or error quite neatly.
getImage('imgUrl').then(function(successUrl){//do stufff}).catch(function(errorUrl){//do stuff})