It is necessary to upload images in two blocks ( #div_left , #div_right ) after the site page is fully loaded.

  • Why not download along with the page? - cpp_user
  • Photos are big and slow down the loading of the site page - user185447
  • First, small thumbnails are loaded at all. - cpp_user
  • Yes, I know, but this option does not suit me - user185447
  • @Muson take a look at my answer or you can use a ready-made lazy loading plugin, as advised by IonDen - Alliswell am

4 answers 4

You can also try using the LazyLoad plugin . It is designed to download images only after the user has scrolled to them. In your case, if the images are already in scope, they will also start loading only after the entire DOM has loaded and JS has started.

    Instead of src write something like data-src . Then, when you need to load images, write $('[data-src]').each(changeDataSrcToSrc) ;

     jQuery(function($) { $('[data-src]').each(changeDataSrcToSrc); }); function changeDataSrcToSrc(i, e) { e.src = $(e).data('src'); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Hello <img data-src="//placehold.it/32x20"> <img data-src="//placehold.it/32x40"> <img data-src="//placehold.it/32x50"> world <img data-src="//placehold.it/32x10">

      The standard solution is something like this:

      HTML

       <img style="display:none;" src="..."> // либо если используете bootstrap <img class="hidden" src="...">

      Js

       window.load = function() { $('img').show(); };

        Most likely so:

         $(function() { $("#div_left").css('background-image', '/img1.png'); $("#div_right").css('background-image', '/img2.png'); });

        But if you need to wait for the download of all the pictures on the page and only then add the background, then:

         $(window).load(function() { $("#div_left").css('background-image', '/img1.png'); $("#div_right").css('background-image', '/img2.png'); });

        PS: http://tech-blog.maddyzone.com/javascript/document-ready-vs-window-load-vs-window-onload