title: How to display loading until all images load completely?
body: <p>I have e-shopping website by Prestashop CMS. Each product page has many images. When user visit a page before all images load completely, some part of page fall into scroll box. I guess this problem because browsers first load text and then load images. Now I set JQuery loading to solve this problem but still problem remain. I put my loading codes and sample product page in following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).load(function() {
    $(".loader").fadeOut("10000");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../img/loading2.gif') 50% 50% no-repeat #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="loader"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and this is sample product page:
  <a href="https://zoodtools.com/%D8%A2%DA%86%D8%A7%D8%B1-%D8%A8%DA%A9%D8%B3-%D8%B4%D8%A7%D8%B1%DA%98%DB%8C/953-%D8%A2%DA%86%D8%A7%D8%B1-%D8%A8%DA%A9%D8%B3-%D8%B6%D8%B1%D8%A8%D9%87-%D8%A7%DB%8C-%D8%B4%D8%A7%D8%B1%DA%98%DB%8C-12-%D8%A7%DB%8C%D9%86%DA%86-%D8%A2%D8%A7%DA%AF-%D9%85%D8%AF%D9%84-bss18c12zli.html?search_query=AEG&amp;results=173" rel="nofollow noreferrer">ZoodTools</a></p>
  
  <p>I want update my codes so that make sure all images are loaded completely then fade out loading and show page to user.</p>