Дождитесь загрузки изображений и затем выполните весь другой код

Question

ОК, я схожу с ума по этому поводу. Я читал здесь в SO и гугл об этом, у меня даже есть набор preloader (найденный здесь в SO), но ни один из плагинов / кода, который я нашел, не помог мне.

Что я хочу сделать: дождаться предварительной загрузки всех изображений и только после этого выполнять весь другой код JavaScript. Насколько я понимаю, это может (но не обязательно) иметь сообщение "загрузка ...".

Дело в том, что у меня есть довольно большое изображение на заднем плане тела и 2 других изображения, которые также больше, и поэтому я хотел бы предварительно загрузить их так, чтобы они сразу показывались и не имели такой уродливой "загрузки" эффект изображения.

Это то, что я сейчас использую, но это не хорошо:

$(document).ready(function()
{    
     preloadImages();
     ...some other code...

    function preloadImages(){
         imagePreloader([
            'images/1.png',
            'images/2.jpg',
            'images/3.png',                
         ]);
     } 

     function imagePreloader(arrayOfImages) {
         $(arrayOfImages).each(function(){
             (new Image()).src = this;
         });
     }   
}

Не знаю, может, мне стоит вызвать этот предварительный загрузчик где-нибудь из .ready ()? или что-то подобное, пожалуйста, помогите ...

Кстати, да, я также прочитал этот пост, и я не знаю почему, но .ready () работает для меня быстрее: (

EDIT:
Хорошо, наконец-то я получил эту вещь на работу. Моя проблема? Я неправильно установил ожидание. Теперь это мой код: у меня есть загрузочный div, который я показываю выше всего, а затем, когда все изображения загружаются (используя $ (window) .load (function () {...}); как я и предлагал, скрыть этот div.

<div id="loading">
    <div id="waiting">
        <img class="loadingGif" src="images/loading.gif">            
    </div>
</div>

#loading
{
   background-size: 100%;
   background-color:#000;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   z-index:999;
}  

#waiting
{
   margin-left: auto;
   margin-right: auto;    
   position:absolute;
   top: 39%;
   left: 27.81%;
   width: 45%;
   height: 150px;    
   background-color: #FFF;
   border: 12px solid #FF771C;
   text-align: center;
}

А мой код jQuery такой:

$(window).load(function()
{    
    $('#loading').addClass('hidden');  
    ...
}

Answer 1

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

window.onload = function(){..}

Это не срабатывает, пока все изображения не будут загружены.

Answer 2

У меня есть плагин с именем waitForImages , который позволяет прикрепить обратный вызов при загрузке изображений потомков.

В вашем случае, если вы хотите дождаться загрузки всех ресурсов, $(window).load() может быть в порядке.Но вы могли бы сделать это немного круче с моим плагином:)

var loading = $('#loading');

$('body').waitForImages(function()
{    
    loading.addClass('hidden');  
}, function(loaded, total)
{
    loading.html(loaded + ' of ' + total);

});

Answer 3

Плагин waitForImages интересный, но решение может быть достигнуто только с помощью:

    var counter = 0;
    var size = $('img').length;

    $("img").load(function() { // many or just one image(w) inside body or any other container
        counter += 1;
        counter === size && $('body').css('background-color', '#fffaaa');
    }).each(function() {
      this.complete && $(this).load();        
    });

Answer 4

Вы можете отобразить изображение только после его загрузки следующим образом:

<img src="hdimg.jpg" width="1920" height="1080" style="display:none;" id="img1">

<script type="text/javascript">
$('#img1').load(function(){
    $(this).css({'display':'block'})
});
</script>

Answer 5

Я думаю, что вы ищете javascript: onLoad (), который вызывается, как только браузер заканчивает загрузку.

Answer 6

Я считаю, что лучшим вариантом jQuery является использование вызова ajax get:

$.get('image.png', {}, function(){
    // Do whatever you want here, this wont execute until image.png is preloaded
});