0
<span>No images Loaded</span>
<div id="bar5" class="mosaic-block cover3">
    <div class="mosaic-overlay"><img src="images/Seg1.png" /></div>
    <a href="#" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
            <p>via Desktopped</p>
        </div>
    </a>
</div>

After the website loaded this image, I want to change the text to something else (eg. 1 Image Loaded).

How can I determine if the image has been loaded or not and then change the text

Friedpanseller
  • 654
  • 3
  • 16
  • 31

2 Answers2

2

Since your original question did not include ANY mention of jQuery, here's a plain javascript solution:

You can use an onload handler for the image:

<span><span id="imagesLoaded">No</span> images Loaded</span>
<div id="bar5" class="mosaic-block cover3">
    <div class="mosaic-overlay"><img onload="imageLoaded()" src="images/Seg1.png" /></div>
    <a href="#" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
            <p>via Desktopped</p>
        </div>
    </a>
</div>

And the javascript:

var imageCount = 0;
function imageLoaded() {
    ++imageCount;
    document.getElementById("imagesLoaded").innerHTML = imageCount;
}

Using jQuery, if you just want to be notified when all images in the page are loaded, you can use this:

$(window).load(function() {
    // code here that runs when all images are loaded
});

If you don't want to change your HTML to include onload handlers and you want to be notified each time an image is loaded, you can do this with jQuery:

$(document).ready(function() {
    var imageLoadCount = 0;

    function updateLoadCount() {
        $("#imagesLoaded").html(imageLoadCount);
    }


    $("img").each(function() {
        // check if the image is already loaded
        if (this.complete) {
            ++imageLoadCount;
        } else {
            // image not loaded yet, install an event handler to notify us when it does
            $(this).load(function() {
                ++imageLoadCount;
                updateLoadCount();
            });
        }
    });
    if (imageLoadCount) {
        updateLoadCount();
    }
});
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • saw somewhere img onload is not recommended, just like . Is it still the case now? – Friedpanseller Mar 26 '14 at 06:39
  • @Friedpanseller - I'm not aware of any reason not to use onload. There is a general recommendation to keep all your event handlers in your javascript and install them via `addEventListener()` (separation of code and presentation) except you can't easily do that with the load event for images in your HTML as they may well load BEFORE you get the event handler installed and you would miss the event if it wasn't in the HTML as shown. So, in the interest of the simplest solution that works, `onload` works fine. – jfriend00 Mar 26 '14 at 06:41
  • I don't think it is working, or maybe my browser/internet is not working, or I did something wrong, i'm trying to use it at http://sths.friedpanseller.com/ipt/presentation/home.html (Line 85, Line 117, Line 25) goes straight from 0 to finished loading the webpage no changes to the number – Friedpanseller Mar 26 '14 at 06:56
  • @Friedpanseller - you have incorrect capitalization on the `imageCount` variable here: `imagecount*20;` – jfriend00 Mar 26 '14 at 06:59
  • @Friedpanseller - sorry, I fixed my typo. You probably want to learn how to look in your browser error console because it would have shown you this error right away. – jfriend00 Mar 26 '14 at 07:00
0

you can check like :-

$("#myImg").on('load',function() {
  alert('I loaded!');
// Do your change stuff here 
}).attr('src', 'images/Seg1.png');// Assign the Src here :-

Here is Javascript approach:-

    var img = document.getElementById('yourimg');

    var imageSrc = "images/Seg1.png";
    img.onload = function() {
        // Stuff to do after image load

    };
   img.src = imageSrc;
Pranav
  • 8,563
  • 4
  • 26
  • 42
  • 2
    You may want to specify that this requires jQuery, which is not a tag to the question. – David Thomas Mar 26 '14 at 06:36
  • 1
    The general convention here on StackOverflow is to NOT supply an answer with jQuery if there was no indication in the original question that jQuery was being requested. Everyone doesn't use jQuery and StackOverflow wants to preserve the ability for people to ask questions that aren't jQuery questions. – jfriend00 Mar 26 '14 at 06:38
  • The OP's example had the image already specified in the HTML. Are you suggesting they change their HTML somehow? – jfriend00 Mar 26 '14 at 06:45
  • Well it's a better approach ..if not OP can specify Onload in HTML itself – Pranav Mar 26 '14 at 06:50