javascript - 动态加载图像缓慢，jquery，php

Question

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

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

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

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

从性能 Angular 来看，哪种方法更好？

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

如果有人能帮助我，我将不胜感激。

Answer 1

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

thumbs 会非常轻巧，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;

   }
  }
 ?>