Question

我使用bootstrap carousel作为图库系统，在查看普通专辑（如200张或更少图像）时效果很好。然而，该网站的所有者试图添加一张包含1472张图片的相册......这显然会使系统崩溃，因为它会立即加载所有这些图像。

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

这是我正在使用的当前脚本：

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

仅在请求时加载图像将需要＆＃34;延迟加载＆＃34;技术。基本原则是预加载第一张图像，而不是其余图像。然后使用一些JS按需加载其他JS。由于TWBS使用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图像问题无法解决。它因为你的浏览器内存不足而崩溃。使用延迟加载它将与第一批一起使用，但您的浏览器很快就会耗尽内存。您可能需要限制此处加载的图像数量...

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

1 个答案: