Displaying text while an image is (down)loading

JavaScript
1

Hello,
I have seen this on Andrew sites and I was hoping if someone could help me figure out how to achieve this in javascript and /the or jquery.

What it is writing a <p> in place of or under/ after and image while the image is downloading / loading. But when the image is fully loaded, that <p>in is hidden.

Also that <p>just has text in it.

Does anyone have any idea how to do this and would be willing to help?

Thanks in Advance & Best Regards,
Team 1504

2

You need to provide a bit more detail. Is the image being loaded using AJAX? Or is the image in place when the page loads, and you just want to show something in the <p> while the page loads, then hide it once the image has finished loading?

3

image in place when the page loads, and you just want to show something in the <p> while the page loads, then hide it once the image has finished loading?

This except, if possible, not while the page loads while that exact image loads.

I’m sorry for any misunderstanding or confusion

4

You could do something like this in your page:

<img src="images/myImage.jpg" alt="My Image" width="400" height="300" />
<p class="loading">Please wait while the image loads...</p>

If you give it a width and height, the browser will show a placeholder of the correct size until the image has “arrived.” That way the layout doesn’t shift or change once the image has been downloaded.

Then make sure jQuery is loaded and then do something like this:

$(window).load(function(){
  // Do something after images are loaded
  $(".loading").fadeOut("fast");
});

Note that this will wait for all images on the page to load. There are other methods to determine if a particular image has loaded, but hopefully this points you in the right direction.

5

yes this does. thank you. and by other method to determine if a particular image has loaded, you mean $(“.image”).load() right?

6

Yeah, that’s one way, but it’s a bit flakey. I did something like that in the past when coding up an image gallery, but had to resort to a plugin that had better cross-browser support. It was probably just to support IE6 or something, so you may be fine…

7

What is the other way to do it, if you don’t mind me asking?

8

There’s a discussion here on the topic. Looks like an updated version of the plugin I used is [URL=“https://github.com/desandro/imagesloaded”]here.