Question

我试图显示加载图片，直到div内容完全加载。

首先隐藏.main-slider div
将课程.loading添加到.main-slider：<div id="main-slider loading"></div>
加载.main-slider div个元素时
.loading将被删除
然后淡入.main-slider div

html

 <div class='sly-main-slider'>
 <div> <!-- Content -->
 <img src="http://4.bp.blogspot.com/-gk6rnMRH9qE/VXJ40BWuC4I/AAAAAAAABZs/BWesiVwBgfg/s1050/camera-girl-nikon-photography-Favim.com-205093.jpg"/>
 </div>
 </div> <!--sly-main-slider end-->

jquery尝试，这里是fiddle：

// when user browses to page
$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(".sly-main-slider div").load(function() {
  // Handler for .load() called.
  $(".sly-main-slider div").show();
  $(".sly-main-slider").removeClass("loading");
});

Answer 1

在您的代码中，您尝试将onload事件附加到div。那不会奏效。您已将它附加到窗口元素，如此

$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(window).load(function() {
   // Handler for .load() called.
   $(".sly-main-slider div").show();
   $(".sly-main-slider").removeClass("loading");
});

Answer 2

试试这个：使用空的src启动你的img，然后更改你的图像的同步异步并在img（'src'）属性完全改变时添加一个回调

$(".sly-main-slider div img").attr('src', "#");
$(".sly-main-slider").addClass("loading");
$(".sly-main-slider div").hide();

$(".sly-main-slider div img").load(function () {
    $(".sly-main-slider div").show();
    $(".sly-main-slider").removeClass("loading");
}).attr('src', "http://lorempixel.com/g/1000/1000/");

.loading {
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 2000;
    background: url(http://1.bp.blogspot.com/-nfXo9GWbDtM/VOn0vr4yLMI/AAAAAAAABCA/dDNgd7_QCFo/s1600/block-loader.gif) no-repeat center center;
    height: 32px;
    width: 32px;
}

.loading:after {
  position: absolute;
  top: 8px;
  left: 40px;
  content: 'Loading...';
} 
body {
    position: relative;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sly-main-slider'>
    <div>
        <img src="http://lorempixel.com/g/1000/1000/" alt="" />
    </div>
</div>
<!--sly-main-slider end-->

Answer 3

从您的评论中读取，您只想控制加载图片的页面的某些部分，对吧？如果您只想查看这些图片，可以查看http://imagesloaded.desandro.com/

简单步骤：

包含jQuery
包含Imagesloaded脚本

点燃它：

$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");
$('.sly-main-slider div').imagesLoaded()
 .done( function( instance ) {
     $(".sly-main-slider div").show();
     $(".sly-main-slider").removeClass("loading");
 });

希望有所帮助

显示加载图像直到div完全加载

3 个答案: