SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question displaying text while an image is (down)loading

    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. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do something like this in your page:

    Code HTML4Strict:
    <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:

    Code JavaScript:
    $(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. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes this does. thank you. and by other method to determine if a particular image has loaded, you mean $(".image").load() right?

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What is the other way to do it, if you don't mind me asking?

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a discussion here on the topic. Looks like an updated version of the plugin I used is here.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •