PHP: не загружать изображения, пока div не развернут?

Question

На моем сайте есть раздел обновлений, который группирует обновления (галереи) в свои собственные div.Каждый div загружен скрытым.Они выбирают раздел, и он расширяется, чтобы показать новые галереи.

Это все работает отлично.Тем не менее, он загружает все изображения на странице загрузки, что заставляет песочные часы задерживаться дольше, чем мне нравится.Есть ли способ загрузить изображение после того, как div стал видимым?

Редактировать:

Пошли с:

    $(function() {
      $('.collapse img').attr('src', function(index, src) {
         return this.getAttribute('data-src');
      });
    });

Свернуть - это имя div сизображения в нем.Как это можно изменить, чтобы изменить только изображения в этом текущем div?Все свернутые элементы имеют одинаковое имя.Однако при расширении я хочу, чтобы он загружал только изображения в этом одном div.Прямо сейчас он загружает все изображения во все свернутые div, как только я раскрываю одно из них.

Answer 1

Ваши div не должны содержать изображения при запуске. Вы можете загружать изображения через JavaScript, если пользователь расширяет ваш div.

Пример:

function expandDiv(idOfDivElement) {
    divObj = document.getElementById(idOfDivElement);
    var imageObj = document.createElement('img');
    imageObj.setAttribute('src', 'path/example_image.jpg');
    divObj.appendChild(imageObj);
    // your expand div code here
}

Вы можете продвинуть эту функцию и добавить второй параметр для URL изображения. Или строку, разделенную массивом / запятой, если вы хотите загрузить несколько изображений.

Answer 2

Вы можете загружать изображения (внутри расширяемого div) из ajax ... Просто сделайте div видимым, а затем вызовите ajax, чтобы получить изображения.Затем используйте .innerHtml() или, если вы используете jQuery, используйте .html(), чтобы поместить изображения в расширенный div.

В этом случае вам нужно создать HTML-страницу на странице ajax.Он просто добавит html в расширенный div.

Таким образом, страница загружается намного быстрее.

Пожалуйста, оставьте отзыв.

Answer 3

Процесс загрузки изображений до браузера. Вы должны загрузить этот контент с помощью JavaScript, например, с помощью AJAX.