0

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

NoDiv_NoClass
  • 138
  • 5
  • 20
  • possible duplicate of [How to show Page Loading image/div/text until the page has finished loading/rendering](http://stackoverflow.com/questions/1853662/how-to-show-page-loading-image-div-text-until-the-page-has-finished-loading-rend) – Mr.Manhattan Feb 16 '15 at 08:49
  • $(window).load(function(){ }) http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin – cafekun Feb 16 '15 at 08:50
  • already see.. but not work for me.. loading.gif and my div images all are show :( – NoDiv_NoClass Feb 16 '15 at 09:30

1 Answers1

1

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>
void
  • 36,090
  • 8
  • 62
  • 107
  • Is this what you wanted? If it solves your problem please consider voting it up and marking it as correct answer. – void Feb 16 '15 at 09:18
  • Thanks for your reply.. but already see.. but not work for me.. loading.gif and my div images all are show :( – NoDiv_NoClass Feb 16 '15 at 09:31