Bootstrap Karussell Problem - Bilder nur laden, wenn angezeigt?

Question

Ich benutze das Bootstrap-Karussell als ein Bildergalerie-System, das gut funktioniert, wenn man ein normales Album wie 200 Bilder oder weniger betrachtet. Der Besitzer der Seite hat jedoch versucht, ein Album mit 1472 Bildern hinzuzufügen ... Was das System total zum Absturz brachte, da es alle diese Bilder auf einmal lädt.

Gibt es eine Möglichkeit, nur das folgende Bild zu laden, wenn auf die nächste Schaltfläche geklickt wird? Wie in einzelnen laden, wenn erforderlich? Oder wenn nicht - eine Idee oder ein Ratschlag, wie ich dieses System etwas beschleunigen kann? Ich möchte lieber nicht die ganze Seite jedes Mal neu laden, nur das Bild.

Hier ist das aktuelle Skript verwende ich:

<? 
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><a href="#" onclick="postImage('<?php echo $sharelink ?>', '<?php echo $sharedesc ?>')"><i class="fa fa-facebook-square" aria-hidden="true" style="color:#06C"></i> Post to Facebook</a></li> 
        <li><a href="send_email.php?image=<? echo $image_id; ?>&backalbum=<? echo $alb_ref; ?>" target="_top"><i class="fa fa-envelope-o" aria-hidden="true" style="color:#939"></i> Send as Email</a></li> 
        <li><a href="user_favourites.php?save=<? echo $image_id; ?>&backalbum=<? echo $alb_ref; ?>" target="_top"><i class="fa fa-floppy-o" aria-hidden="true" style="color:#090"></i> Save as Favourite</a></li> 
        <li class="divider"></li> 
        <li><a href="report_image.php?report=<? echo $image_id; ?>&backalbum=<? echo $alb_ref; ?>" target="_top"><i class="fa fa-flag" aria-hidden="true" style="color:#F00"></i> Report Photo</a></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> 

<a href="album.php?alb_ref=<? echo $alb_ref; ?>" class="btn btn-default" target="_top"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i> Back</a> 
</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

die Bilder Laden nur dann, wenn eine „lazy-load“ Technik erfordert angefordert. Das Grundprinzip besteht darin, das erste Bild vorzuladen, aber nicht den Rest. Verwenden Sie dann JS, um die anderen bei Bedarf zu laden. Wie TWBs verwendet jQuery ist es relativ einfach, mit diesem Code zu tun:

<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 
    } 
    }); 
}); 

diesen JSFiddle für ein Beispiel.

Die Sache zu erinnern ist jedoch, dass Ihr 1472 Bild Problem wird sich nicht beheben. Es stürzt ab, weil in Ihrem Browser nicht mehr genügend Arbeitsspeicher verfügbar ist. Mit der Lazy-Load wird es mit dem ersten Haufen funktionieren, aber Ihrem Browser wird bald der Speicher ausgehen. Möglicherweise müssen Sie die Anzahl der hier geladenen Bilder begrenzen ...