Показать Загрузка изображения До полной загрузки div

Question

Я пытаюсь показать загрузочное изображение до полной загрузки div.

1. Первая шкура .main-slider div
2. Добавить класс .loading в .main-slider: <div id="main-slider loading"></div>
3. Когда .main-slider div элементы загружен
4. .loading будет удалить
5. Тогда выгорает .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

чтения из ваших комментариев, вы хотите контролировать только некоторые части страницы, загружать изображения, не так ли? Если вы ищете просто проверить те изображения, которые вы могли бы взглянуть на http://imagesloaded.desandro.com/

Легких шагов:

• Включить JQuery
• Include 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"); 
  }); 
  

Надеюсь, что это поможет

Answer 2

В своем коде вы пытаетесь прикрепить onload события к делам. Это не сработает. Вы должны прикрепить его к оконному элементу, как этого

$(".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 3

Попробуйте это: Начните IMG с пустым СРКОМ, а затем изменить СРК ваших асинхронных изображений и добавить функцию обратного вызова, когда IMG («ЦСИ») атрибут полностью изменила

$(".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-->