Waiting for an image to finish rendering





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















Is there a way in vanilla Javascript to wait until an image is completely rendered before continuing execution? I need this to occur after the document has already been loaded. According to Is there something like a ready event when an image in html is loaded and rendered?, the document's load event waits for rendering to finish. However, I need to load images after the document has been initially loaded.



People seem to say to use the load event on the image element. However, the element's load event only detects when an image is loaded, not when it has finished rendering.



For example, I have an image tag set to the size of the viewport:



<img id="test" style="width: 100vw; height: 100vh;"></img>


The following code then loads an extremely large image into the tag (the image I am testing on is specifically 7360x4912, but the process should work for all image sizes):



var img = document.getElementById("test");
img.addEventListener("load", function () {
alert("Image is loaded but not necessarily rendered");
});
img.src = "ExtremelyLargeImage.jpg";


However, when the event is fired, the image is not fully rendered (i.e., it is displayed as either completely white or partially white).



Avoiding using an arbitrarily-long setTimeout is critical here, especially because render times may be drastically different between PC and mobile browsers.



Finally, I am aware that different image sizes can be served to different screen sizes rather than using just one large image for all screens. However, for this purpose, I must be able to detect when an image has completed rendering, so the actual image size is irrelevant.



Edit 1:
I adding requestAnimationFrame within the load callback, putting the alert into the callback for requestAnimationFrame:



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
img.src = "ExtremelyLargeImage.jpg";


As expected, this does not work because requestAnimationFrame executes its callback before the next repaint.



Edit 2:



Adding a second requestAnimationFrame layer in the stack has the same issue that just having one has. Basically, now it is executing the alert between the first and second repaints rather than just before the first. However, there is no guarantee that the image has been completely painted by then. It is an improvement, though.



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
});
img.src = "ExtremelyLargeImage.jpg";









share|improve this question

























  • Possible duplicate of Is there something like a ready event when an image in html is loaded and rendered?

    – Andreas
    Nov 22 '18 at 4:12











  • Just add a requestAnimationFrame() callback within the load event listener.

    – Patrick Roberts
    Nov 23 '18 at 20:02











  • @PatrickRoberts I edited the question to include requestAnimationFrame. Please make sure I implemented as you had intended. My understanding of requestAnimationFrame is still limited and the implementation does not work.

    – Jonathan
    Nov 25 '18 at 0:47











  • Can you actually create a Minimal, Complete, and Verifiable example?

    – Patrick Roberts
    Nov 25 '18 at 1:05











  • Possible duplicate of How to detect when an image has finished rendering in the browser (i.e. painted)?

    – Patrick Roberts
    Nov 25 '18 at 2:04


















1















Is there a way in vanilla Javascript to wait until an image is completely rendered before continuing execution? I need this to occur after the document has already been loaded. According to Is there something like a ready event when an image in html is loaded and rendered?, the document's load event waits for rendering to finish. However, I need to load images after the document has been initially loaded.



People seem to say to use the load event on the image element. However, the element's load event only detects when an image is loaded, not when it has finished rendering.



For example, I have an image tag set to the size of the viewport:



<img id="test" style="width: 100vw; height: 100vh;"></img>


The following code then loads an extremely large image into the tag (the image I am testing on is specifically 7360x4912, but the process should work for all image sizes):



var img = document.getElementById("test");
img.addEventListener("load", function () {
alert("Image is loaded but not necessarily rendered");
});
img.src = "ExtremelyLargeImage.jpg";


However, when the event is fired, the image is not fully rendered (i.e., it is displayed as either completely white or partially white).



Avoiding using an arbitrarily-long setTimeout is critical here, especially because render times may be drastically different between PC and mobile browsers.



Finally, I am aware that different image sizes can be served to different screen sizes rather than using just one large image for all screens. However, for this purpose, I must be able to detect when an image has completed rendering, so the actual image size is irrelevant.



Edit 1:
I adding requestAnimationFrame within the load callback, putting the alert into the callback for requestAnimationFrame:



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
img.src = "ExtremelyLargeImage.jpg";


As expected, this does not work because requestAnimationFrame executes its callback before the next repaint.



Edit 2:



Adding a second requestAnimationFrame layer in the stack has the same issue that just having one has. Basically, now it is executing the alert between the first and second repaints rather than just before the first. However, there is no guarantee that the image has been completely painted by then. It is an improvement, though.



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
});
img.src = "ExtremelyLargeImage.jpg";









share|improve this question

























  • Possible duplicate of Is there something like a ready event when an image in html is loaded and rendered?

    – Andreas
    Nov 22 '18 at 4:12











  • Just add a requestAnimationFrame() callback within the load event listener.

    – Patrick Roberts
    Nov 23 '18 at 20:02











  • @PatrickRoberts I edited the question to include requestAnimationFrame. Please make sure I implemented as you had intended. My understanding of requestAnimationFrame is still limited and the implementation does not work.

    – Jonathan
    Nov 25 '18 at 0:47











  • Can you actually create a Minimal, Complete, and Verifiable example?

    – Patrick Roberts
    Nov 25 '18 at 1:05











  • Possible duplicate of How to detect when an image has finished rendering in the browser (i.e. painted)?

    – Patrick Roberts
    Nov 25 '18 at 2:04














1












1








1








Is there a way in vanilla Javascript to wait until an image is completely rendered before continuing execution? I need this to occur after the document has already been loaded. According to Is there something like a ready event when an image in html is loaded and rendered?, the document's load event waits for rendering to finish. However, I need to load images after the document has been initially loaded.



People seem to say to use the load event on the image element. However, the element's load event only detects when an image is loaded, not when it has finished rendering.



For example, I have an image tag set to the size of the viewport:



<img id="test" style="width: 100vw; height: 100vh;"></img>


The following code then loads an extremely large image into the tag (the image I am testing on is specifically 7360x4912, but the process should work for all image sizes):



var img = document.getElementById("test");
img.addEventListener("load", function () {
alert("Image is loaded but not necessarily rendered");
});
img.src = "ExtremelyLargeImage.jpg";


However, when the event is fired, the image is not fully rendered (i.e., it is displayed as either completely white or partially white).



Avoiding using an arbitrarily-long setTimeout is critical here, especially because render times may be drastically different between PC and mobile browsers.



Finally, I am aware that different image sizes can be served to different screen sizes rather than using just one large image for all screens. However, for this purpose, I must be able to detect when an image has completed rendering, so the actual image size is irrelevant.



Edit 1:
I adding requestAnimationFrame within the load callback, putting the alert into the callback for requestAnimationFrame:



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
img.src = "ExtremelyLargeImage.jpg";


As expected, this does not work because requestAnimationFrame executes its callback before the next repaint.



Edit 2:



Adding a second requestAnimationFrame layer in the stack has the same issue that just having one has. Basically, now it is executing the alert between the first and second repaints rather than just before the first. However, there is no guarantee that the image has been completely painted by then. It is an improvement, though.



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
});
img.src = "ExtremelyLargeImage.jpg";









share|improve this question
















Is there a way in vanilla Javascript to wait until an image is completely rendered before continuing execution? I need this to occur after the document has already been loaded. According to Is there something like a ready event when an image in html is loaded and rendered?, the document's load event waits for rendering to finish. However, I need to load images after the document has been initially loaded.



People seem to say to use the load event on the image element. However, the element's load event only detects when an image is loaded, not when it has finished rendering.



For example, I have an image tag set to the size of the viewport:



<img id="test" style="width: 100vw; height: 100vh;"></img>


The following code then loads an extremely large image into the tag (the image I am testing on is specifically 7360x4912, but the process should work for all image sizes):



var img = document.getElementById("test");
img.addEventListener("load", function () {
alert("Image is loaded but not necessarily rendered");
});
img.src = "ExtremelyLargeImage.jpg";


However, when the event is fired, the image is not fully rendered (i.e., it is displayed as either completely white or partially white).



Avoiding using an arbitrarily-long setTimeout is critical here, especially because render times may be drastically different between PC and mobile browsers.



Finally, I am aware that different image sizes can be served to different screen sizes rather than using just one large image for all screens. However, for this purpose, I must be able to detect when an image has completed rendering, so the actual image size is irrelevant.



Edit 1:
I adding requestAnimationFrame within the load callback, putting the alert into the callback for requestAnimationFrame:



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
img.src = "ExtremelyLargeImage.jpg";


As expected, this does not work because requestAnimationFrame executes its callback before the next repaint.



Edit 2:



Adding a second requestAnimationFrame layer in the stack has the same issue that just having one has. Basically, now it is executing the alert between the first and second repaints rather than just before the first. However, there is no guarantee that the image has been completely painted by then. It is an improvement, though.



var img = document.getElementById("test");
img.addEventListener("load", function () {
requestAnimationFrame(function () {
requestAnimationFrame(function () {
alert("Image load");
});
});
});
img.src = "ExtremelyLargeImage.jpg";






javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 5:58







Jonathan

















asked Nov 22 '18 at 4:06









JonathanJonathan

589




589













  • Possible duplicate of Is there something like a ready event when an image in html is loaded and rendered?

    – Andreas
    Nov 22 '18 at 4:12











  • Just add a requestAnimationFrame() callback within the load event listener.

    – Patrick Roberts
    Nov 23 '18 at 20:02











  • @PatrickRoberts I edited the question to include requestAnimationFrame. Please make sure I implemented as you had intended. My understanding of requestAnimationFrame is still limited and the implementation does not work.

    – Jonathan
    Nov 25 '18 at 0:47











  • Can you actually create a Minimal, Complete, and Verifiable example?

    – Patrick Roberts
    Nov 25 '18 at 1:05











  • Possible duplicate of How to detect when an image has finished rendering in the browser (i.e. painted)?

    – Patrick Roberts
    Nov 25 '18 at 2:04



















  • Possible duplicate of Is there something like a ready event when an image in html is loaded and rendered?

    – Andreas
    Nov 22 '18 at 4:12











  • Just add a requestAnimationFrame() callback within the load event listener.

    – Patrick Roberts
    Nov 23 '18 at 20:02











  • @PatrickRoberts I edited the question to include requestAnimationFrame. Please make sure I implemented as you had intended. My understanding of requestAnimationFrame is still limited and the implementation does not work.

    – Jonathan
    Nov 25 '18 at 0:47











  • Can you actually create a Minimal, Complete, and Verifiable example?

    – Patrick Roberts
    Nov 25 '18 at 1:05











  • Possible duplicate of How to detect when an image has finished rendering in the browser (i.e. painted)?

    – Patrick Roberts
    Nov 25 '18 at 2:04

















Possible duplicate of Is there something like a ready event when an image in html is loaded and rendered?

– Andreas
Nov 22 '18 at 4:12





Possible duplicate of Is there something like a ready event when an image in html is loaded and rendered?

– Andreas
Nov 22 '18 at 4:12













Just add a requestAnimationFrame() callback within the load event listener.

– Patrick Roberts
Nov 23 '18 at 20:02





Just add a requestAnimationFrame() callback within the load event listener.

– Patrick Roberts
Nov 23 '18 at 20:02













@PatrickRoberts I edited the question to include requestAnimationFrame. Please make sure I implemented as you had intended. My understanding of requestAnimationFrame is still limited and the implementation does not work.

– Jonathan
Nov 25 '18 at 0:47





@PatrickRoberts I edited the question to include requestAnimationFrame. Please make sure I implemented as you had intended. My understanding of requestAnimationFrame is still limited and the implementation does not work.

– Jonathan
Nov 25 '18 at 0:47













Can you actually create a Minimal, Complete, and Verifiable example?

– Patrick Roberts
Nov 25 '18 at 1:05





Can you actually create a Minimal, Complete, and Verifiable example?

– Patrick Roberts
Nov 25 '18 at 1:05













Possible duplicate of How to detect when an image has finished rendering in the browser (i.e. painted)?

– Patrick Roberts
Nov 25 '18 at 2:04





Possible duplicate of How to detect when an image has finished rendering in the browser (i.e. painted)?

– Patrick Roberts
Nov 25 '18 at 2:04












1 Answer
1






active

oldest

votes


















0














The trouble with the requestAnimationFrame() can be that after event load an img will be rendered on second animation frame. So you were on the right path, just call another function on first requestAnimationFrame



So you could try something like this:



<script>
function rendered() {
//Render complete
alert("image rendered");
}

function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}

function loaded() {
requestAnimationFrame(startRender);
}




<img onload="loaded();" src="http://ximmix.mixeriksson.com/bilder/iron_maiden_piece_of_mind_foldout_cleaned_3034x1500px_110412145556_2.jpg">


If it works give also credits to #Hovitya this post



This is his jsfiddle example






share|improve this answer
























  • Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

    – Patrick Roberts
    Nov 25 '18 at 2:04











  • Well, you're probably right Patrick... 🙁

    – Adam Orlov
    Nov 25 '18 at 2:09











  • See edit 2. Although this is helpful, it does not solve the underlying issue.

    – Jonathan
    Nov 26 '18 at 5:59












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423742%2fwaiting-for-an-image-to-finish-rendering%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














The trouble with the requestAnimationFrame() can be that after event load an img will be rendered on second animation frame. So you were on the right path, just call another function on first requestAnimationFrame



So you could try something like this:



<script>
function rendered() {
//Render complete
alert("image rendered");
}

function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}

function loaded() {
requestAnimationFrame(startRender);
}




<img onload="loaded();" src="http://ximmix.mixeriksson.com/bilder/iron_maiden_piece_of_mind_foldout_cleaned_3034x1500px_110412145556_2.jpg">


If it works give also credits to #Hovitya this post



This is his jsfiddle example






share|improve this answer
























  • Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

    – Patrick Roberts
    Nov 25 '18 at 2:04











  • Well, you're probably right Patrick... 🙁

    – Adam Orlov
    Nov 25 '18 at 2:09











  • See edit 2. Although this is helpful, it does not solve the underlying issue.

    – Jonathan
    Nov 26 '18 at 5:59
















0














The trouble with the requestAnimationFrame() can be that after event load an img will be rendered on second animation frame. So you were on the right path, just call another function on first requestAnimationFrame



So you could try something like this:



<script>
function rendered() {
//Render complete
alert("image rendered");
}

function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}

function loaded() {
requestAnimationFrame(startRender);
}




<img onload="loaded();" src="http://ximmix.mixeriksson.com/bilder/iron_maiden_piece_of_mind_foldout_cleaned_3034x1500px_110412145556_2.jpg">


If it works give also credits to #Hovitya this post



This is his jsfiddle example






share|improve this answer
























  • Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

    – Patrick Roberts
    Nov 25 '18 at 2:04











  • Well, you're probably right Patrick... 🙁

    – Adam Orlov
    Nov 25 '18 at 2:09











  • See edit 2. Although this is helpful, it does not solve the underlying issue.

    – Jonathan
    Nov 26 '18 at 5:59














0












0








0







The trouble with the requestAnimationFrame() can be that after event load an img will be rendered on second animation frame. So you were on the right path, just call another function on first requestAnimationFrame



So you could try something like this:



<script>
function rendered() {
//Render complete
alert("image rendered");
}

function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}

function loaded() {
requestAnimationFrame(startRender);
}




<img onload="loaded();" src="http://ximmix.mixeriksson.com/bilder/iron_maiden_piece_of_mind_foldout_cleaned_3034x1500px_110412145556_2.jpg">


If it works give also credits to #Hovitya this post



This is his jsfiddle example






share|improve this answer













The trouble with the requestAnimationFrame() can be that after event load an img will be rendered on second animation frame. So you were on the right path, just call another function on first requestAnimationFrame



So you could try something like this:



<script>
function rendered() {
//Render complete
alert("image rendered");
}

function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}

function loaded() {
requestAnimationFrame(startRender);
}




<img onload="loaded();" src="http://ximmix.mixeriksson.com/bilder/iron_maiden_piece_of_mind_foldout_cleaned_3034x1500px_110412145556_2.jpg">


If it works give also credits to #Hovitya this post



This is his jsfiddle example







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 25 '18 at 1:44









Adam OrlovAdam Orlov

298512




298512













  • Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

    – Patrick Roberts
    Nov 25 '18 at 2:04











  • Well, you're probably right Patrick... 🙁

    – Adam Orlov
    Nov 25 '18 at 2:09











  • See edit 2. Although this is helpful, it does not solve the underlying issue.

    – Jonathan
    Nov 26 '18 at 5:59



















  • Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

    – Patrick Roberts
    Nov 25 '18 at 2:04











  • Well, you're probably right Patrick... 🙁

    – Adam Orlov
    Nov 25 '18 at 2:09











  • See edit 2. Although this is helpful, it does not solve the underlying issue.

    – Jonathan
    Nov 26 '18 at 5:59

















Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

– Patrick Roberts
Nov 25 '18 at 2:04





Instead of reposting duplicated content, you should close-vote the question as a duplicate if the exact answer you're copying answers the question as-is.

– Patrick Roberts
Nov 25 '18 at 2:04













Well, you're probably right Patrick... 🙁

– Adam Orlov
Nov 25 '18 at 2:09





Well, you're probably right Patrick... 🙁

– Adam Orlov
Nov 25 '18 at 2:09













See edit 2. Although this is helpful, it does not solve the underlying issue.

– Jonathan
Nov 26 '18 at 5:59





See edit 2. Although this is helpful, it does not solve the underlying issue.

– Jonathan
Nov 26 '18 at 5:59




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423742%2fwaiting-for-an-image-to-finish-rendering%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()