Display images when they are fully loaded?

Question

I want the image to be displayed only after it's fully loaded. How can I do that?

<ul id="listcontainer">
    <li class="li1">
        <img src="images/m1.png">
    </li>
</ul>

.li1 > img{width:100%;} – Rohit Azad Malik Oct 26 '15 at 12:08 — Rohit Azad Malik, Oct 26 '15 at 12:08

score 2 · Answer 1 · answered Oct 26 '15 at 12:10

2

You could play with the document.ready and window.load events as window.load fires when all your images are loaded.

$(document).ready(function(){
    $("img").hide();
});

$(window).load(function(){
    $("img").show();
});

answered Oct 26 '15 at 12:10

Lucas Rodrigues

1,234
2
11
22

score 0 · Answer 2 · answered Oct 26 '15 at 12:10

You could try this Put this in your css #listcontainer{ opacity:0; }

    $(document).ready(function(){
    $('#listcontainer').animate({
    opacity: '1'
    },500);
});

If you really want to hide the images you could use .css and display:none; Put this in your css #listcontainer{ display:none; }

$(document).ready(function(){
        $('#listcontainer').css(
        'display', 'block'
        );
    });

score 0 · Answer 3 · answered Oct 26 '15 at 12:15

I think you can do something like this:

    <script>
        document.addEventListener('DOMContentLoaded', function(){
            var img = document.createElement("img");
            img.src = "images/m1.png";
            var src = document.getElementsByClassName("li1");
            src.appendChild(img);
        }, false);
    </script>

Display images when they are fully loaded?

3 Answers3