Question

请查看我的HTML代码和我的图片......

<!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

有一个包含32张图像的滑块。我想显示一个loading.gif，直到所有32个图像都被加载。但第2部分照常显示。

我试过延迟加载，jquery apend，但不适合我。搜索完整的stackoverflow但无法找到有关此div多个图像加载的任何资源...所有这些都是关于iframe或整页加载。

请帮助我学习新事物。

由于

Answer 1

我想这就是你想要的。它检查图像负载并精美地显示剩余图像的数量。

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>

显示loading.gif，直到加载div图像为止

1 个答案: