jquery load div when img loaded from script

Question

This code is working when img src is already set, like :

<div id="images">
<img src="something.jpg" />
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("div#images").hide();
        $("div#images").find("img").load(function(){
            $(this).closest("div#images").show();
        });
    });
</script>

But it is not working if images src is calling a script :

<img src="getimage.php?img=something.jpg" />

In getimage.php I do echo readfile($_GET["img"]);

How can I make this work?

Patrick

Can you try this: in your browser navigate to: "getimage.php?img=something.jpg", can you see the image? — Josep, Dec 15 '12 at 16:02
I've tried the load function, see this : http://stackoverflow.com/questions/13893908/jquery-div-when-all-images-loaded — trogne, Dec 15 '12 at 16:25

score 0 · Answer 1 · answered Dec 15 '12 at 16:01

0

If you want to manipulate the SRC attribute you can you JQuery's attr() function:

$("#myImg").attr("src","newImage.png");

answered Dec 15 '12 at 16:01

Matanya

6,233
9
47
80

OK, how would I applied this? – trogne Dec 15 '12 at 16:08
not sure what you are asking. When you need to fetch a new image instead of the existing one you use the method the way I demonstrated. that is, you can have an hidden IMG element with empty SRC attribute, that will be manipulated via JS – Matanya Dec 15 '12 at 16:09

Josep · Answer 2 · 2012-12-15T16:34:45.803

0

Use window.onload instead of $(document).ready.

$(document).ready happens when the html is ready, while window.onload happens after the images and the contend have been loaded.

I think that the problem whith your code is that when any of the images inside the div "div#images" is loaded, then the function that displays that same div is called, even if the other images haven't been loaded yet.

You could try to hide the "div#images" on $(document).ready and display it on window.onload.

edited Dec 15 '12 at 16:34

answered Dec 15 '12 at 16:10

Josep

12,926
2
42
45

I've tried it. But it's not working because $(window).load() runs later, after the image data is loaded as well. – trogne Dec 15 '12 at 16:24
Try to hide the "div#images" on $(document).ready and display it on window.onload – Josep Dec 15 '12 at 16:35

score 0 · Answer 3 · answered Dec 15 '12 at 22:25

Thanks!

That's what I did :

<script type="text/javascript">
$("div#images").hide();
var $images = $('div#images img');
var loaded_images_count = 0;
$images.load(function(){
    loaded_images_count++;
    if (loaded_images_count == $images.length) {
        $("div#images").show();
    }
});
</script>

jquery load div when img loaded from script

3 Answers3