How to show an image while the photo slide loads

Question

I have a photo slide that is based on ul and will load the photos to mount the slide. Below the section that brings the photos:

<ul id="slide" class="bxslider" style="padding:0px;margin:0px;">
  <?php
    for($i=0;$i<count($photos);$i++){
              <li class="propertyinfoli">
    <a class="osmodal" href="<?php echo JURI::root()?>caminho-da-imagem">
    <img src="<?php echo JURI::root()?>caminho-da-imagem"/>
    </a>
  </li>

As he uploads the photos, these photos appear at the bottom of each other, leaving the page with a strange appearance, until loading everything, which is when it is aligned right.

I wanted, while uploading the photos, to be 1 visible photo, or to upload hidden, then when loading everything, it shows the slide. Some slides have more than 25 photos, then it takes about 10 seconds to load.

You know if it’s possible?

Answer 1

Hello,

In this case, one solution is to start the hidden slider (display: None), perform a loading via Javascript, and display the slider when all images are loaded. Below is an example:

$imgs = $('#slide img');
$status = $('#status');

var loaded = 0;
var total = $imgs.length;

$status.html('Carregando');
$imgs.each(function() {
  var img = new Image();
  img.onload = function() {
    loaded++;
    
    if(loaded == total) {
      $('#slide').show();
      $status.html('Carregamento completo!');
    }
  }
  img.src= $(this).attr('src');
});

#slide {
  display: none;
}
.propertyinfoli img {
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="status"></p>
<ul id="slide" class="bxslider" style="padding:0px;margin:0px;">
  <li class="propertyinfoli">
    <a class="osmodal" href="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"><img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"/></a>
  </li>
  <li class="propertyinfoli">
    <a class="osmodal" href="https://images.pexels.com/photos/17679/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"><img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"/></a>
  </li>
  <li class="propertyinfoli">
    <a class="osmodal" href="https://images.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"><img src="https://images.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/></a>
  </li>
</ul>