How to show an image while the photo slide loads

Question

How to show an image while the photo slide loads

Navigation

#1 by (1 votes)

0

I have a photo slide that is based on ul and will upload the photos to mount the slide. Below the section that follows 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 loads the photos, these photos will appear one underneath the other, leaving the page with a strange appearance, until loading everything, which is when it is aligned right.

I wanted the photo to be visible, or it should be hidden, so when it loads, it shows the slide. Some slides have more than 25 photos, it takes about 10 seconds to load.

Do you know if it's possible?

php javascript

asked by anonymous 10.08.2017 / 21:17

1 answer

Array of data retrieved from a response Correlating vectors through indexes in Python

score 1 · Accepted Answer

Hello,

In this case, a solution is to start the hidden slider (display: none), perform a loading via JavaScript and display the slider when all images are loaded. Here 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><pid="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><liclass="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><liclass="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>