Photos Preload

Question

Photos Preload

Navigation

#1 by (0 votes)

0

How do I 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

asked by anonymous 08.02.2018 / 13:48

1 answer

Friendly URL with TimThumb Why are you giving this error and how do I reverse it?

score 0 · Accepted Answer

You can do it 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" />