动态加载图像，jquery，php
我正在开发一个网站，其中有一些照片显示，分为相册。每个照片的路径都存储在一个数据库中。
我想用jquery图片库插件来显示照片。问题是这些照片需要花费很长时间才能加载，这有时会导致浏览器崩溃。
我尝试过用galleria、lazyload和jpreloader来懒散地加载，但到目前为止问题仍然存在。
对于站点的开发，我使用CodeIgniter。到目前为止，我已经尝试了两种加载照片的方法。1)将它们从控制器传递到视图。
2)使用jquery和ajax。
从性能角度看，哪种方法更好？
照片的数量并不是很大，只有17张，总大小约为5mb。
如果有人能帮我，我会非常感激的。
回答 2
Stack Overflow用户
发布于 2013-11-06 19:17:02
您需要在服务器端压缩/调整图像的大小，最好是图库大小的一个拇指，大小在720到960之间的图片库，
拇指将非常轻巧，大小大概为850 17，适合17。
我为您提供了一个易于使用的php类，用于处理所有图像格式：
<?php
class scratch_utils_imgresize
{
static function resize($file_path
,$new_file_path
,$img_width
,$img_height
,$scale) {
$new_width = $img_width * $scale;
$new_height = $img_height * $scale;
$new_img = @imagecreatetruecolor($new_width, $new_height);
switch (strtolower(substr(strrchr($file_path, '.'), 1))) {
case 'jpg':
case 'jpeg':
$src_img = @imagecreatefromjpeg($file_path);
$write_image = 'imagejpeg';
$image_quality = isset($options['jpeg_quality']) ?
$options['jpeg_quality'] : 75;
break;
case 'gif':
@imagecolortransparent($new_img, @imagecolorallocate($new_img, 0, 0, 0));
$src_img = @imagecreatefromgif($file_path);
$write_image = 'imagegif';
$image_quality = null;
break;
case 'png':
@imagecolortransparent($new_img, @imagecolorallocate($new_img, 0, 0, 0));
@imagealphablending($new_img, false);
@imagesavealpha($new_img, true);
$src_img = @imagecreatefrompng($file_path);
$write_image = 'imagepng';
$image_quality = isset($options['png_quality']) ?
$options['png_quality'] : 9;
break;
default:
$src_img = null;
}
$success = $src_img && @imagecopyresampled(
$new_img,
$src_img,
0, 0, 0, 0,
$new_width,
$new_height,
$img_width,
$img_height
) && $write_image($new_img, $new_file_path, $image_quality);
// Free up memory (imagedestroy does not delete files):
@imagedestroy($src_img);
@imagedestroy($new_img);
return $success;
}
}
?>Stack Overflow用户
发布于 2013-11-06 19:50:34
首先，您需要定义性能瓶颈。
- 这是您的数据库查询响应吗？
- 是你的PHP脚本吗？
- 是你的javascript吗？
- 是你的浏览器吗？
- 这是你的图像服务器的上传速度吗？
如果您知道这是服务器的上传速度(通常是这样的)，那么您不应该一次将所有图像输出到HTML中。这个问题可以用很多种方法来解决，我只谈2.
- “长页”格式
- 分页/标签格式
1)正确使用jQuery插件LazyLoad，如下所示：
// include jQuery and lazyload plugin
<script>
// Make sure $ is still short for jQuery (no conflict exists with other libraries)
$(function() {
$("img.lazy").lazyload();
});
</script>
<body>
<img class="lazy" data-original="img/example.jpg">2) jQuery UI选项卡方法(Documents这里)
<?php
// json_encode the albums you get from your db
$jsonEncoded = json_encode($returned_array_from_db_of_albums);
?>
<!-- include jQuery and jQuery UI -->
<script>
$(function() {
var albums = <?php echo $jsonEncoded; ?>;
// iterate through albums to find the album names and build our tab menu (expressed in HTML already below) and the associated <div>s where the images will ultimately go
// e.g. $('#album-names').html(album_names_html);
// then $('#albums').append(album_names_divs_html);
function displayAlbum (id) {
// id parameter will be the id of the <a> tag you clicked below
// fetch the images from the albums array you defined above associated with the album id
// build the <img> tags and set the associated $('div#'+id).html() to your output
}
$('#albums').tabs();
displayAlbum('first-album'); // first-album should be the id of the first album in your albums array
$('#albums ul li a').click(function() {
displayAlbum($(this).attr('id'));
});
});
</script>
<body>
<div id="albums">
<ul id="album-names">
<!-- following 2 <li>s should be generated by your javascript as explained above -->
<li><a href="#album-1">Album 1</a></li>
<li><a href="#album-2">Album 2</a></li>
</ul>
<!-- like my comment above, so should these -->
<div id="album-1"></div>
<div id="album-2"></div>
</div>此外，确保您的图像是尽可能压缩的其他答案之一。但是，我不建议每次有人点击页面时压缩图像，比如在PHP脚本中。一定要事先压缩图像。
https://stackoverflow.com/questions/19819780
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号