2

我正在开发一个网站，其中有一些照片要显示，分为相册。每张照片的路径都存储在数据库中。

我想使用 jquery 库插件显示照片。问题是照片需要永远加载，这有时会导致浏览器崩溃。

我曾尝试使用 Galleria、lazyload 和 jpreloader 进行延迟加载，但到目前为止问题仍然存在。

对于网站的开发，我使用 CodeIgniter。到目前为止，我已经尝试了两种加载照片的方法。1）通过将它们从控制器传递到视图。
2) 通过使用 jquery 和 ajax。

从性能的角度来看，哪种方法更好？

照片的数量并不多，只有 17 张，总大小约为 5mb。

如果有人可以帮助我，我将非常感激。

4

2 回答 2

0

您需要在服务器端压缩/调整图像大小，最好是一个拇指在您的画廊大小和一个在 720 和 960 之间的完整尺寸，

拇指将非常轻巧，17的全尺寸可能为850kb

我给你一个易于使用的处理所有图像格式的 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;

   }
  }
 ?>
于 2013-11-06T19:17:02.883 回答
0

首先，您需要定义性能瓶颈。

  • 是您的数据库查询响应吗？
  • 是你的 PHP 脚本吗？
  • 是你的 JavaScript 吗？
  • 是你的浏览器吗？
  • 是你图片服务器的上传速度吗？

如果您知道这是服务器的上传速度（通常是这种情况），那么您不应该一次将所有图像输出到 HTML 中。这可以通过多种方式解决，其中我将仅介绍 2...

  1. “长页”格式
  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选项卡式方法（此处的文档）...

<?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 脚本中。请务必事先压缩图像。

于 2013-11-06T19:50:34.817 回答