Решение для загрузки большой галереи изображений JQuery - PullRequest
Новая
       4

Решение для загрузки большой галереи изображений JQuery

0 голосов
/ 07 января 2010

Я обновляю некоторые галереи изображений на веб-сайте университета (в некоторой степени должен соответствовать стандартам). В большинстве галерей много страниц HTML. Я использовал плагин jQuery, Galleriffic, а также некоторый PHP-код, который я написал, для создания хороших разбитых на страницы галерей, и до сих пор он выглядит великолепно. У меня есть две проблемы.

Первая проблема заключается в том, что даже когда JS включен, загрузка все равно занимает некоторое время. Из того, что я понимаю о JS, все элементы должны быть загружены в DOM, чтобы JS мог ими манипулировать, поэтому все миниатюры должны загружаться на страницу до того, как JS включится. Могу ли я сделать что-то, чтобы предотвратить загрузку всех миниатюр, это загрузить те на каждой странице галереи? Таким образом, время загрузки распределяется по каждой странице.

Вторая проблема заключается в том, что когда Javascript отключен, все 400+ миниатюр должны загружаться на страницу. Это ожидаемое поведение, и оно отлично работает для небольших галерей, но не очень хорошо для больших. Можно ли разбить его на страницы в PHP, но использовать JS (если включено) для предотвращения разбиения на страницы?

Я не очень опытен в JS, поэтому я надеялся, что найдется решение, о котором я просто не подозреваю и которое смогу реализовать без полного ремонта.

Ответы [ 2 ]

2 голосов
/ 07 января 2010

Ну, во-первых, вы можете создать страницу PHP, которая загружает галерею, например, 25 изображений одновременно.

При нажатии кнопки нумерации страниц страница перезагружается и отображаются следующие 25 изображений.

Это должно быть довольно просто. JS / jQuery не требуется.

Затем вы можете добавить свой JS-скрипт.

например. У меня есть выпадающий список, чтобы выбрать, какую галерею я хочу использовать.

В jQuery я добавил слушателя на selectbox.change.

OnChange, я делаю jQuery.post и перезагружаю ту же страницу, теперь получаю мои следующие 25 изображений.

Результат списка (список изображений), который я возвращаю из моего jQuery.post как HTML.

Тогда я просто говорю 

jQuery('#gallery').html(data);

Вот часть моего кода в моем файле gallery.php: 

   // If Type is set to e.g. 'jquery', then we know tis page load is from a jQuery request.
    if ( (isset($_POST['type'])) && (isset($_POST['page'])) )
    {
        //This is a jQuery request
        $jQueryReq  = 1;
        $page         = $_POST['page'];
    }


<?php if($jQueryReq == 0) { ?>
  Default html oupthere when there is no jquery request
<?php } else if($jQueryReq == 1) {  ?>
  Here you put the code that gets the images and displays them on the page    
<?php }?>

А вот и псевдо-код jQuery. Обратите внимание, что тип возвращаемого сообщения - HTML 

  // Retrieve and list images
  jQuery.post("wp-content/imageGallery/gallery.php", { id: itemID, page: pagenr },
  function(data){
    jQuery('#galleryContainer').html(data);
    // Here you can add other jQuery functions to interact with images
  }, "html");

Надеюсь, это даст вам некоторое представление о том, как вы можете использовать PHP / jQuery для показа галереи изображений

1 голос
/ 07 января 2010

Немного мозгового штурма ...

В вашем случае может иметь смысл написать оригинальную разметку (с использованием PHP), включающую только первую страницу результатов. Этот подход должен позволить вашему документу завершить и начать JS в разумные сроки.

Когда страница полностью загружена, вы можете использовать jQuery - $ .ajax () - для получения большего количества изображений ... либо всех новых страниц по мере необходимости, в зависимости от размера проблемы, которую вы хотите спроектировать это для.

Остерегайтесь, поскольку это может мешать правильному вызову gallerific плагина. Я не знаком с этим, и я не могу сказать наверняка. Если это произойдет, вам может потребоваться завершить процесс загрузки дополнительных изображений перед тем, как начать работу.

...