С точки зрения производительности, какой лучший способ показать 1000 изображений на странице?

Question

Я пытаюсь показать 1000 довольно маленьких изображений на странице (довольно много, правда, вне моего контроля).

При загрузке их всех сразу производительность явно страдает от резкой визуализации 1000 изображений приодин раз.

Я пытался реализовать применение изображения src при прокрутке (при большом количестве - прокрутка 250px, загрузка 25 изображений и т. д.), затем попытался загрузить изображения по таймеру.

Эти методы сделалипомочь повысить производительность, но что будет наиболее эффективным способом сделать это?Казалось, что они все еще имеют раздражающее запаздывание - я понимаю, что есть фундаментальная проблема с рендерингом такого количества изображений на одной странице, но есть ли лучшее решение?

РЕДАКТИРОВАТЬ:

Нумерация страниц, конечно, поможет, но здесь не вариант.Кроме того, изображения извлекаются из API, поэтому не удобно создавать 1 большое изображение / использовать спрайты.

Answer 1

Если все изображения являются уникальными файлами, то вы чувствуете большой удар от создания нескольких соединений для их получения. Вы можете создать 1 «главное» изображение всех элементов, а затем создать 1000 делений каждый с различным классом или идентификатором, а затем в css определить смещения фона для каждого. Этот метод часто называют спрайтами CSS.

http://css -tricks.com / 158-CSS спрайтов-/

Answer 2

Не могли бы вы сделать нумерацию страниц AJAX, которая динамически загружает изображения в зависимости от номера страницы?Например, 25 изображений на странице.При запросе первой страницы вы динамически загружаете следующую страницу и так далее.Таким образом, пользователь не заметит задержку. Это все, что вы можете сделать, чтобы еще больше повысить производительность!

Answer 3

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

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

Answer 4

Вот ответ с другой стороны:

Не могли бы вы объединить изображения на стороне сервера и, возможно, отобразить их в виде линий?Хотя это, вероятно, будет работать только при определенных обстоятельствах.

Answer 5

Поскольку спрайты / нумерация страниц не были доступны в этой ситуации, я нашел следующее лучшее решение:

Адаптация метода «загрузить изображения при прокрутке» с некоторыми изменениями и жесткой настройкой родительского элемента для каждого изображения (таким образом, есть 1000 элементов, каждый с изображениями) на display:none.

С родительскими элементами по умолчанию display:none, а также с первым 25 display:block:

var scrollPos = 0; var endEle = 0;

$ (окно) .scroll (функция () {

scrollPos = $(window).scrollTop();

    if  ($(window).scrollTop() < scrollPos + 250) {

       //load 15 images.

       $('.myDiv img').slice(endEle,endEle+50).each(function(obj){
            var self = $(this);
            var url = self.attr("role");
            self.attr("src", url);
            self.parent().css("display","block");
       });

       endEle = endEle + 50;

    }

});

Это устанавливает следующие 50 элементов на display:block и переключает <img role> в <src> (URL-адреса изображений были помещены в role при визуализации страницы) каждый раз, когда пользователь прокручивает 250px.