Php 引导转盘问题-仅在查看时加载图像?
我将引导转盘用作图像库系统,在查看普通相册(例如200张或更少的图像)时,它可以很好地工作。然而,该网站的所有者试图添加包含1472张图像的相册。。。很明显,当系统同时加载所有这些图像时,它完全崩溃了 是否有方法仅在单击“下一步”按钮时加载以下图像?如单次装载,何时需要?或者,如果没有-一些想法或建议,如何我可以加快这个系统一点?我不希望每次都重新加载整个页面,只希望重新加载图像 以下是我正在使用的当前脚本:Php 引导转盘问题-仅在查看时加载图像?,php,jquery,css,twitter-bootstrap,carousel,Php,Jquery,Css,Twitter Bootstrap,Carousel,我将引导转盘用作图像库系统,在查看普通相册(例如200张或更少的图像)时,它可以很好地工作。然而,该网站的所有者试图添加包含1472张图像的相册。。。很明显,当系统同时加载所有这些图像时,它完全崩溃了 是否有方法仅在单击“下一步”按钮时加载以下图像?如单次装载,何时需要?或者,如果没有-一些想法或建议,如何我可以加快这个系统一点?我不希望每次都重新加载整个页面,只希望重新加载图像 以下是我正在使用的当前脚本: <? if(!$select_first == ''){ $sql = "
<?
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>
“method=“post”target=“\u top”>
分享
下载
图像/
仅在请求时加载图像需要“延迟加载”技术。基本原则是预加载第一个图像,而不是其余图像。然后根据需要使用一些JS加载其他图像。由于TWBS使用jQuery,使用此代码相对容易:
$(“#转盘示例通用”).on('slide.bs.carousel',函数(e){
$(e.relatedTarget).find('img').each(function()){
var$this=$(this);
var src=$this.data('lazy-load-src');
如果(类型src!=“未定义”&&src!=“未定义”){
$this.attr('src',src)
$this.data('lazy-load-src','');//清理
}
});
});
看看这个例子
但是要记住的是,1472图像问题不会自行修复。它会崩溃,因为浏览器内存不足。使用延迟加载,它将与第一批图像一起工作,但浏览器很快就会内存不足。您可能需要限制此处加载的图像量…可能会帮助您,为您添加延迟加载旋转木马,结帐