How to display loading until all images load completely?

Question

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:

$(window).load(function() {
  $(".loader").fadeOut("10000");
});

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/loading2.gif') 50% 50% no-repeat #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader"></div>

and this is sample product page: ZoodTools

I want update my codes so that make sure all images are loaded completely then fade out loading and show page to user.

I was facing the same issue yesterday. I managed to fix it with `window.onload = function() ...` put right after the opening body tag. I mean instead of `$(window).load(function() ...`. — Kelvin Samuel, Nov 21 '17 at 10:13
Can you try my way, set default state div `.loader` is visible, inside `$(document).ready(function(){ })` (jquery style) or `window.onload` = function(){ } (pure javascript style) call `fadeOut` function! Hope this can help! — Anph, Nov 21 '17 at 10:20

Maksim Ivanov · Answer 1 · 2017-11-21T11:34:03.870

jQuery

var $loading = $('.loader').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

The ajaxStart/Stop functions will fire anytime you do any Ajax calls.

Source

OR

As per answers to this question, make the following additions to your CSS:

/* Start by setting display:none to hide the loader.*/
.loader {
    display:    none;
    ...
}

/* When the body has the loading class, you turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, your
   loader element will be visible */
body.loading .loader {
    display: block;
}

And here is jQuery:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading"); },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

You're attaching add/removeClass events to the body element anytime the ajaxStart/Stop events are fired. When an ajax event starts, you add the "loading" class to the body and when events are done, you remove the "loading" class from the body. This way you achieve the same but with the help of CSS.

score 0 · Answer 2 · answered Nov 21 '17 at 15:03

I would suggest fixing the problem of "some parts of page fall into scroll box" (although I'm not exactly sure what you mean) instead of overlaying the whole page with a loader.

Try lazy loading your images - I have used lazyloadxt and it works very well, but there are numerous other alternatives. This should solve the problem of page elements changing position as images are loaded (which is the root problem if i understood correctly), while still giving customers with slow connection some information about your product.

How to display loading until all images load completely?

2 Answers2