Bootstrap carousel issue - load images only when viewed? - php

Question

I am using the bootstrap carousel as an image gallery system, which works nicely when viewing a normal album such as 200 images or less. The owner of the site however attempted to add an album with 1472 images... Which totally crashed the system obviously as it is loading all of these images at once.
Is there a way to only load the following image when the next button is clicked? As in single loading, when required? Or if not - some idea or advice on how I can speed this system up a bit? I'd rather not have the whole page reload every single time, only the image.
Here is the current script I am using:
<?
if(!$select_first == ''){
$sql = "SELECT * FROM `new_images` WHERE `alb_ref` = '$alb_ref' AND full_link < '$select_first' ORDER BY full_link ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$image_id = $row['img_id'];
$thumb_link = $row['thumb_link'];
$full_link = $row['full_link'];
if (!file_exists($full_link)) {
$full_link = 'img/default_img.jpg';
}
$viewed_count = $row['viewed_count'];
$date_added = $row['date_added'];
$i++;
$reback = $reback - 1;
?>
<div class="item <? if($i == 1){ echo 'active'; } else { } ?>">
<!-- Set the first background image using inline CSS below. -->
<div class="fill"><img class="img-responsive" style="max-width: 100%; max-height: 80%; display: block; margin: 0 auto;" src="<? echo $full_link; ?>" alt="image"></div>
<div class="carousel-caption">
<h2>
<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="post" target="_top">
<input type="hidden" id="image_selected" name="image_selected" value="<? echo $full_link; ?>">
<?
$getPhotoinfo = mysqli_fetch_assoc(mysqli_query($conn, "SELECT album_name, venue_name, city_name FROM new_albums WHERE album_ref = '$alb_ref'"));
$photo_album_name = $getPhotoinfo['album_name'];
$photo_venue_name = $getPhotoinfo['venue_name'];
$photo_city_name = $getPhotoinfo['city_name'];
$sharelink = $main_website_domain.'/'.$full_link;
$sharedesc = '';
?>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-share" aria-hidden="true"></i> Share <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" role="menu">
<li><i class="fa fa-facebook-square" aria-hidden="true" style="color:#06C"></i> Post to Facebook</li>
<li><i class="fa fa-envelope-o" aria-hidden="true" style="color:#939"></i> Send as Email</li>
<li><i class="fa fa-floppy-o" aria-hidden="true" style="color:#090"></i> Save as Favourite</li>
<li class="divider"></li>
<li><i class="fa fa-flag" aria-hidden="true" style="color:#F00"></i> Report Photo</li>
</ul>
</div>
<button type="submit" id="download" name="download" class="btn btn-success"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i> Back
</form>
</h2>
<p style="color:#666">Image <? echo $starter - $reback; ?> / <? echo $rowcount_total_images; ?></p>
</div>
</div>
<?
}
}
}
?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="color:#03C; font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="color:#03C; font-size:70px;"></span>
</a>
</header>

Answer 1

Loading the images only when requested will require a "lazy-load" technique. The basic principle is to pre-load the first image, but not the rest. Then use some JS to load the others on demand. As TWBS uses jQuery it's relatively easy to do with this code:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- load the first image -->
<img src="http://lorempixel.com/640/480/cats/1">
</div>
<div class="item">
<!-- don't load the rest -->
<img src="your-wait-icon-here.gif" data-lazy-load-src="http://lorempixel.com/640/480/cats/2">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
$(e.relatedTarget).find('img').each(function() {
var $this = $(this);
var src = $this.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$this.attr('src', src)
$this.data('lazy-load-src', ''); // clean up
}
});
});
See this JSFiddle for an example.
The thing to remember however is that your 1472 image problem will not fix itself. It's crashing because your browser is running out of memory. With the lazy-load it will work with the first bunch but your browser will soon run out of memory. You may need to limit the amount of images loaded here...