Загрузка изображений динамически медленно, jquery, php

Я разрабатываю веб-сайт, на котором есть несколько фотографий для отображения, разделенных на альбомы. Путь каждой фотографии хранится в базе данных.Загрузка изображений динамически медленно, jquery, php

Я хочу показать фотографии с помощью плагина галереи jquery. Проблема в том, что фотографии навсегда загружаются, что иногда приводит к сбою браузера.

Я пробовал ленивую загрузку с galleria, lazyload и jpreloader, но до сих пор проблема остается.

Для разработки сайта я использую CodeIgniter. До сих пор я пробовал два метода для загрузки фотографий. 1) Передавая их от контроллера к виду.
2) Используя jquery и ajax.

Какой метод лучше с точки зрения производительности?

Число фотографий на самом деле не очень большое, всего 17 с общим размером около 5 мб.

Если бы кто-нибудь мог мне помочь, я был бы очень благодарен.

источник

2013-11-06 magarisi

Сколько обычно требуется, чтобы ваш сервер ответил на запрос? Потому что 17 фотографий - 17 запросов. Обычно это не проблема, но если ваш сервер не настроен должным образом или перегружен ... –

Что бы я сделал, это сохранить путь к изображениям в переменной javascript при загрузке страницы, а затем написать HTML '

Также, если вы должны отобразить все 17 изображений на одной странице сразу же, [lazyload] (http://www.appelsiini.net/projects/lazyload) должен работать, если вы его правильно реализуете. –

вам нужно сжать/изменить размер изображения на стороне сервера, предпочтительно один большой палец на размере вашей галереи & один между 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; 

    } 
    } 
?>

источник

2013-11-06 19:17:02 mikakun

Спасибо за ваш ответ. Наконец, я использовал плагин Galleria с ленивым вариантом. Я создал отдельные миниатюры, используя код, который вы мне дали, и теперь они загружаются просто отлично. – magarisi

Прежде всего, необходимо определить узкие места производительности.

Это ответ на ваш запрос к базе данных?
Это ваш 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 Tabb ed (документация 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-скрипте. Обязательно предварительно сжимайте изображения.

источник

2013-11-06 19:50:34

Ваши комментарии заставляют меня задуматься, нашли ленивый вариант Galleria и заставили его работать. Lazyload отлично работает. – magarisi

Загрузка изображений динамически медленно, jquery, php

ответ

Смежные вопросы