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

Question

我正在尝试显示加载图像，直到 div 内容完全加载。

先隐藏.main-slider div
将class.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。那行不通的。您已将它附加到 window 元素，如下所示

$(".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，然后更改图像异步的 src 并在 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
包括图像加载脚本

像这样启动它：

$(".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 完全加载

Show Loading image Until div fully loaded

html

javascript

jquery

load