Bootstrap轮播问题 - 仅在查看时才加载图像？

我使用引导传送带作为图像库系统，在查看普通相册（如200张或更少图像）时效果很好。然而，该网站的所有者试图添加一张拥有1472张图片的专辑......这显然完全让系统崩溃，因为它一次载入所有这些图片。Bootstrap轮播问题 - 仅在查看时才加载图像？

有没有办法只在下一个按钮被点击时加载下面的图片？在单次装载时，何时需要？或者如果没有 - 关于如何加速这个系统的一些想法或建议？我宁愿没有整个页面重新加载每一次，只有图像。

这里是我使用的是当前的脚本：

<? 
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>

来源

2016-07-29 Snappysites

http://stackoverflow.com/questions/27675968/lazy-load-not-work-in-bootstrap-carousel可能会帮助您，将延迟加载添加到你的旋转木马。 – Epodax

结帐http://getbootstrap.com/javascript/#carousel-events –

只加载时要求将需要一个“懒加载”技术的图像。基本原理是预加载第一个图像，但不是其他的。然后使用一些JS按需加载其他JS。由于采用拼焊板的jQuery它相对容易，使用此代码做：

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

一个例子来看看这个JSFiddle。

但要记住的是，1472图像问题不会自行修复。它正在崩溃，因为您的浏览器内存不足。随着延迟加载它将与第一批一起工作，但你的浏览器很快就会耗尽内存。您可能需要限制在这里加载的图像数量...

来源

2017-02-10 23:03:47 Vino

Bootstrap轮播问题 - 仅在查看时才加载图像？

回答

相关问题