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

Question

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

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

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

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

Answer 1

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

Это должно быть довольно прямолинейно. Нет необходимости в JS/jQuery.

Тогда вы можете добавить скрипт JS. . У меня есть раскрывающийся список, чтобы выбрать, какую галерею я хочу использовать. В jQuery я добавил прослушиватель на selectbox.change.

OnChange, я делаю jQiery.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, чтобы показать галерею изображений

Answer 2

Битых мозговое предложения ...

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

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

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