Question

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

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

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

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

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

照片数量不是很大，只有17张，总大小约为5mb。

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

Answer 1

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

拇指非常轻巧，全尺寸可能是850kb，适用于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;

   }
  }
 ?>

Answer 2

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

是您的数据库查询响应吗？
是你的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标签式方法（文档here）...

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

加载图像动态缓慢，jquery，PHP

2 个答案: