Good afternoon, I want to make a small static site without reloading the main page when clicking on links. Just loading countries into a div block, trying to implement all this through jquery

$(document).ready(function() { $('li a').click(function(){ var toLoad = $(this).attr('href'); $('.load-in').fadeOut('fast', loadContent); $('.loader').show(); function loadContent() { $('.load-in').css({ opacity : 0.3 }).load( toLoad , hideLoad ); }; function hideLoad () { $('.load-in').fadeIn('fast' , function () { //прячем лоадер и opacity 1 $('.loader').fadeOut('fast'); $('.load-in').animate({ opacity : 1 }); } ); }; return false; }); });

css

 *{padding:0;margin:0;} .ab {width:60px;height:60px;background:red;} .wrap {width:900px;margin:0 auto;position:relative;} .load-in {} .loader { height:60px; width:60px; left:50%; margin-left:-30px; position:fixed; top:30%; display:none; z-index:1000; background:url('images/preloader.gif') center no-repeat red; }

markup

  <div class="loader"></div> <div class="wrap"> <ul> <li class="ab"><a href="load.html">load me</a></span> <li class="ab"><a href="loader.html">load here</a></span></li> </ul> <div class="load-in"> </div> </div>

But for some reason callback in this line

 $('.load-in').css({ opacity : 0.3 }).load( toLoad , hideLoad );

It works before the pictures are loaded in the loading page. It is necessary that the opacity and preloader be removed after the content and images are fully loaded. I don’t really understand jquery, so if I ask a Nubian question I apologize in advance!

Thank!

  • after loading it is necessary in the list $ ('. load-in img') to search for elements whose! element.prop (complete), in the kind of scope to start a counter of such and set it according to the number of these elements, to decrease the element.load () decrease when the counter reaches 0, remove the opacity and preloader. - zb '
  • but in general I would not have laid on $ .load (), judging by the current trends in jquery can be canceled. as already done with toggle () - zb '

2 answers 2

Because the ready event is triggered by document before loading images. You need to use $(window).load() instead of $(document).ready()

  • Thanks for the advice! I registered $ (window) .load (), but for some reason it did not help! cone.hostei.com/index3.html when switching preloader and opacity are applied before the container is loaded! - Cone

Intuitively, the solution was found through the following piece of code

 <script> $(document).ready(function() { $('li a').click(function(){ var toLoad = $(this).attr('href'); $('.load-in').fadeOut('fast', loadContent); $('.loader').show(); function loadContent() { var $loadIn = $('.load-in'); $loadIn.css({ opacity : 0.3 }).load(toLoad , function () { var $images = $('img', $loadIn), imageCount = $images.length, loadedCount = 0; //wait on images before showing the content $images.on('load', function () { if (++loadedCount === imageCount) { $images.off('load'); $('.loader').hide(); $loadIn.show().animate({ opacity: 1}, 300 ); } }); //make sure the content is still shown if images fails to load //or are very slow to load setTimeout(function () { if (loadedCount !== imageCount) { $images.off('load'); $('.loader').hide(); $loadIn.show().animate({ opacity: 1}, 300 ); } }, 5000); }); }; return false; }); }); </script>

css

 *{padding:0;margin:0;} .ab {width:60px;height:60px;background:red;} .wrap {width:900px;margin:0 auto;position:relative;} .load-in {height:500px;width:800px;margin:0 auto;} .loader { height:60px; width:60px; left:50%; margin-left:-30px; position:fixed; top:30%; display:none; z-index:1000; background:url('images/preloader.gif') center no-repeat; }

markup

 <div class="loader"></div> <div class="wrap"> <ul> <li class="ab"><a href="load.html">load me</a></li> <li class="ab"><a href="loader.html">load here</a></li> </ul> <div class="load-in"> </div> <img src="images/preloader.gif"> </div>