Preload of Photos

Asked

Viewed 33 times

1

How do a Preload with loading or a gif in my photos.

<?php

$diretorio = '../fotos/';
$arquivos = scandir($diretorio);

foreach($arquivos as $arquivo) {
  if(preg_match("/.+.[jJ][pP][eE]?[gG]$/", $arquivo)) {
    ?>
    <div class="col-lg-2">
    <a href="fotos/<?php echo $arquivo; ?>" class="portfolio-box" data-gallery="Galeria_Cachoeira" data-toggle="lightbox">
        <img src="fotos/<?php echo $arquivo; ?>" class="img-responsive" alt="">
        <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
                <span class="glyphicon glyphicon-fullscreen"></span>
            </div>
        </div>
    </a>
</div>
<?php
  }
}
exit;
?>
php javascript

  • https://www.jqueryscript.net/demo/Image-Preloader-With-Callback-jQuery/ take a look if it helps

1 answer

1


you can do by css

.loading {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}

<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />


.loading {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />

  • you can test with heavier images ^^

  • Let’s go to the trials. Thank you

  • I use this ex on my sites he simple but it works ^^

  • The only problem is that with this the heavier image will carry over the gif of the Download right, gets a strange effect... Because the image will carry from top to bottom until it covers the whole gif...

  • I usually treat the images with php before d display :(

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.