Вспомните событие загрузки окна - javascript

Я собираюсь сделать все возможное здесь, чтобы четко объяснить, что моя проблема без использования jsfiddle, потому что $(window).on("load") не запускается в их среде IDE.Вспомните событие загрузки окна - javascript

У меня есть html 'wrapper', который динамически загружает (ajax) html в div.content.

<body> 
<div class="header"></div> 
<div class="overlay"></div> 


<div class="loader hidden" align="center"> 
    <img src="images/loading.gif" /> 
</div> 

<!-- Container for the content --> 
<div class="content"> 
    <!-- dynamic content appears here --> 
</div> 



<div class="footer"></div> 
</body>

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

$(".content").toggleClass("hidden", true); 
$(".loader").toggleClass("hidden", false);

В конце процесса загрузки/Ajax У меня есть следующий код:

$(".content").load("screens/"+this.currentScreen+"/"+this.currentScreen + ".html .screen", function(response, status, xhr) 
{ 
    //other code 
    // 
    // 
    $(window).on("load", function() { 
     $(".content").toggleClass("hidden", false); 
     $(".loader").toggleClass("hidden", true); 
    }); 
});

я выбрал $(window).on("load"), потому что я только хочу div.content быть видимым, когда все изображения по завершении загрузки, а против $(document).ready().

Для первой части контента для загрузки, это работает отлично. Однако для второго фрагмента контента событие $(window).on("load") никогда не срабатывает.

У меня есть подозрение, что это событие не может быть вызвано во второй раз, или, может быть, оно отключено после вызова?

Я пробовал запускать/вызывать метод, но безрезультатно.

if((window.onload) === null) 
{ 
    $(window).on("load", function() { 
     console.log("$(window).on('load') called"); 
     $(".content").toggleClass("hidden", false); 
     $(".loader").toggleClass("hidden", true); 
    }); 
} 
else 
{ 
    $(window).trigger("load"); 
}

Кроме того, я уверяю всех, что это не содержание загружается, потому что, если я заменю $(window).on("load") с $(document).ready() он работает отлично. Я просто отчаянно хочу дождаться загрузки новых изображений.

Как я могу это достичь?

источник

2016-05-19 Zze

Событие загрузки окна выполняется только один раз. Даже когда вы динамически добавляете контент, он не запускается. Такое поведение действительно отличается от ready(), где jQuery всегда будет вызывать обратный вызов, даже если документ готов, когда он впервые встречает этот код.

При динамическом добавлении контента нет «однострочного», чтобы получить обратный вызов, когда все изображения этого содержимого были загружены. Код, который вам нужно написать, должен был бы захватить событие load для каждого загружаемого изображения и посмотреть, какой из них был последним, а также следить за изображениями, которые не загружались (из-за неверной ссылки или они были кэшированы).

ImagesLoaded Plug-in предлагает метод, который делает все это. Вы можете использовать его как это:

$(function() { 
    $(".content").load("screens/"+this.currentScreen+"/"+this.currentScreen + ".html .screen", function(response, status, xhr) 
    { 
     //other code 
     // 
     // 
     $(".content").imagesLoaded(function() { 
      // images have loaded 
      $(".content").toggleClass("hidden", false); 
      $(".loader").toggleClass("hidden", true); 
     }); 
    }); 
});

Так что я хотел бы предложить, чтобы просто включить этот плагин, как это:

<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"> 
</script>

и использовать метод imagesLoaded(), как приведенный выше код.

источник

2016-05-19 05:33:36 trincot

Очень интересно, я проверю это немедленно. - Спасибо за ответ. – Zze

Разве это получилось? Можете ли вы сообщить мне об этом? – trincot

Меня временно заменили на другую задачу - узнаете в ближайшие несколько часов. Приветствия. – Zze

Вспомните событие загрузки окна - javascript

ответ

Смежные вопросы