动态加载图像缓慢，jQuery，PHP
[英]Loading images dynamically slow, jquery, php
问题描述
I am developing a website that has some photos to display, divided in albums. 
我正在开发一个网站，其中包含一些要显示的照片，分为几张相册。 Each photo's path is stored in a database. 每张照片的路径都存储在数据库中。
I want to display the photos using a jquery gallery plugin. 我想使用jQuery Gallery插件显示照片。 The problem is that the photos are taking forever to load, which sometimes causes the browser to crash. 问题是照片要永久装载，有时会导致浏览器崩溃。
I have tried lazy loading with galleria, lazyload and jpreloader, but so far the problem remains. 我已经尝试过使用Galleria，lazyload和jpreloader进行延迟加载，但是到目前为止，问题仍然存在。
For the development of the site i use CodeIgniter. 对于网站的开发，我使用CodeIgniter。 So far i have tried two methods for loading the photos. 到目前为止，我已经尝试了两种加载照片的方法。 1) By passing them from the controller to the view. 1）通过将它们从控制器传递到视图。
2) By using jquery and ajax. 2）通过使用jquery和ajax。
Which method is better from a performance perspective? 从性能角度来看，哪种方法更好？
The number of the photos isn't really big, just 17 with total size about 5mb. 照片的数量不是很大，只有17张，总大小约为5mb。
If anyone could help me, i would be extremely gratefull. 如果有人能帮助我，我将非常感激。
2 个解决方案
解决方案1
0 已采纳 2013-11-06 19:17:02
you need to compress/resize your images on the server side, preferably one thumb at size of your gallery & one between 720 & 960 for the full size, 您需要在服务器端压缩/调整图像大小，最好是图库大小的一个拇指，而全尺寸则为720至960，
thumbs will be really lightweight, full size maybe 850kb for the 17 拇指将非常轻巧，这17个手指的完整大小可能为850kb
i give you an easy to use php class dealing with all image format : 我给你一个易于使用的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;
}
}
?>
解决方案2
0 2013-11-06 19:50:34
First of all, you need to define your performance bottleneck. 首先，您需要定义性能瓶颈。
- Is it your database query response? 是您的数据库查询响应吗？
- Is it your PHP script? 是您的PHP脚本吗？
- Is it your javascript? 是您的JavaScript吗？
- Is it your browser? 是您的浏览器吗？
- Is it your image server's upload speed? 是图像服务器的上传速度吗？
If you know it's the server's upload speed, which is usually the case, then you should not output into HTML all of the images at once. 如果您知道通常是服务器的上载速度，则您不应一次将所有图像输出到HTML。 This can be solved in many ways, of which I'll only cover 2... 这可以通过多种方式解决，其中我只涉及2个...
- The "long page" format “长页”格式
- The "paginated/tabbed" format “分页/选项卡式”格式
1) Use the jQuery plugin LazyLoad properly like so: 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 tabbed method (documentation here )... 2） jQuery UI选项卡式方法（ 在此处提供文档）...
<?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>
Also make sure your images are as compressed as possible as one of the other answers suggested. 还要确保您的图像尽可能压缩为建议的其他答案之一。 However, I don't recommend compressing the images every time someone hits the page, like in a PHP script. 但是，我不建议每次有人点击页面时都压缩图像，例如在PHP脚本中。 Be sure to compress the images beforehand. 确保事先压缩图像。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.