CODEWITHSUNDEEP
javascriptjquery
NoDiv_NoClass
NoDiv_NoClass

Reputation: 138

show loading.gif until load div images are load

Please take a look at my HTML code and my image...

<!DOCTYPE html>
<html>
<head>
<title>Div Loading</title>
    <link rel="stylesheet" href="style.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/slider.css" />
    <script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="main">
        <h2>Welcome to my website</h2>
         <div class="start_banner_left"> <!-- This is part 1 -->
                <section class="main" id="slider_title_po">
                    <div id="ri-grid" class="ri-grid ri-grid-size-2">
                        <div class="loading"></div>
                        <ul>
                            <li><a href="#"><img src="images/medium/1.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/2.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/3.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/4.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/5.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/6.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/7.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/8.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/9.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/10.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/11.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/12.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/13.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/14.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/15.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/16.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/17.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/18.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/19.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/20.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/21.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/22.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/23.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/24.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/25.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/26.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/27.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/28.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/29.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/30.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/31.jpg"/></a></li>
                            <li><a href="#"><img src="images/medium/32.jpg"/></a></li>
                        </ul>
                    </div>
                </section>
            </div>
            <div class="start_banner_right"> <!-- This is part 2 -->
                <section class="right_content">
                    <div class="something">
                        <ul>
                            <li><a href="#"><img src="images/myimage.jpg"/></a></li>
                            <li><a href="#"><img src="images/mypicture.jpg"/></a></li>
                        </ul>
                    </div>
                </section>
            </div>
    </div>
</body>
</html>

html look like http://picoolio.net/images/2015/02/16/work6e291.png Click to see Full Image

There is a slider with 32 images. I want to show a loading.gif untill all 32 images are loaded. but part 2 show as usual.

I tried lazy load, jquery apend , but not work for me. search on full stackoverflow but can't find any resource about this div multiple images load... there is all are about iframe or full page load.

Please help me to learn new things.

Thanks

Upvotes: 0

Views: 1418

Answers (1)

void
void

Reputation: 36703

I guess this is what you wanted. It check for image load and beautifully displays the number of remaining images.

jQuery 

$(function() {
    var $img = $('img:not(.loader)'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) $("#remainingImages").html(totalImg+" Images Remaining");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

HTML

<div id="loader"><img class="loader" src="load.gif"><br><span id="remainingImages"></spna></div>

Upvotes: 1

Related Questions