просмотреть удаленный файл php с помощью .load после полной загрузки

Я использую простой код для отображения файлов php в контейнере без загрузки страницы с помощью .load с помощью функции для отображения и скрытия анимированного изображения загрузки

<style> .loadingbg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #84ffbf; display: none; } .loadingbg img{width: 60px; height: 60px; position: absolute; left: 48%; top: 48%;} </style> <script> $(document).on('click','a',function (e) { $(".loadingbg").css('display','block'); e.preventDefault(); var url = $(this).attr('href'); $('#container').load(url+ '#content',function () { $(".loadingbg").css('display','none'); }); }); </script> <div class="loadingbg"><img src="images/page-loader.gif"></div> <a href="contact.php">contact</a> <a href="about.php">about</a> <div id="container"> <h1>index</h1> </div>

поэтому, когда я нажимаю на ссылку, она отображает фон и небольшое анимированное изображение для загрузки другой страницы без изменения URL-адреса, но быстро извлекает текстовый контент, а loadbg исчезает и начинает загружать изображения на новую веб-страницу. Я хочу не скрывать loadbg, пока удаленный файл php не будет полностью загружен, включая изображения.

демонстрация

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

В функциях обратного вызова нагрузки вы можете использовать библиотеку imagesLoaded (или любую другую библиотеку, которая проверяет загрузку изображений). Также при нажатии на #container я скрываю #container и когда загружаются все изображения – затем снова показывайте:

 $(document).on('click','a',function (e) { $(".loadingbg").css('display','block'); $("#container").hide(); e.preventDefault(); var url = $(this).attr('href'); $('#container').load(url+ '#content',function () { $('#container').imagesLoaded( function() { // images have loaded $(".loadingbg").css('display','none'); $("#container").show(); }); }); });

Я должен признать, что я не на 100% уверен, что это сработает …

Но я бы постарался:

 $(document).on('click','a',function (e) { $(".loadingbg").css('display','block'); e.preventDefault(); var url = $(this).attr('href'); $('#container').load(url+ '#content',function () { $('#container').on("load", function(){ $(".loadingbg").css('display','none'); }); }); });

Привязка события «load» к вашему # #container в .load() должна «задерживать» изменение .loadingbg CSS до момента, когда все содержимое полностью загружено.