Lazy загружает изображения, как

Я разрабатываю eshop. На странице продуктов, основанной на категории i, была размещена фильтрация на основе javascript. Однако возникает проблема, если в категории много продуктов. У этой ссылки есть что-то похожее... http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

Как никогда эта страница мучительно медленна и превышает 2 МБ!!!

Каждому продукту для меня нужна половина killobyte, но изображение является проблемой.. Так что я смотрю, как ленивые загрузки изображений.. Так как моя страница имеет разбиение на страницы в отличие от этого сайта, я думаю, что загрузка изображений, которые видны только на странице, является решением. Однако, как это сделать, для работы как для javascript, так и для пользователей, не поддерживающих javscript, существует проблема. Единственное решение, хотя я сохраняю ссылку в классе css каким-то образом изображения для невидимых продуктов, а если показано после фильтрации изменений с помощью javascript, то изображение src... Пользователи без javascript не имеют этой проблемы, так как нажатие на фильтр переместит их на другую страницу...

Любая другая идея?

ОТВЕТЫ

Ответ 1

Четыре варианта:

Вот три варианта для вас:

Использовать фоновое изображение

Ответ на вопрос Kangkan охватывает это.

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

Используйте плагин

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

Пейджинг на стороне сервера

Здесь основная страница загружается либо без каких-либо продуктов, либо только с первой страницы продуктов. Обычно вы помещаете все продукты в контейнер, например:

<ul id='productList'>
</ul>

Тогда у вас будут обычные элементы пользовательского интерфейса для перемещения между страницами результатов. У вас будет серверный ресурс, который бы возвращал фрагменты HTML или JSON-форматированные данные, которые вы могли бы использовать для заполнения этого списка. Я буду использовать HTML для простоты (хотя я бы, вероятно, использовал JSON в производственном приложении, так как он был бы меньше). Каждая запись продукта представляет собой собственный автономный блок:

<li id='product-001'>
  <div>This is Product 001</div>
  <img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
  <div>Blurb about Product 001</div>
</li>

... и затем страница возвращает столько, сколько вы считаете нужным. Вы запрашиваете страницу с помощью Ajax и обновляете список продуктов с помощью JavaScript. Поскольку вы сказали, что используете jQuery, это может быть тривиально простым:

$('#productList').load("/path/to/paging/page?start=X&count=Y");

Здесь примерный прототип (а не производственный код); он подделывает Ajax, потому что JSBin давал мне проблемы Ajax.

Загрузка одной большой страницы, а затем клиентский JavaScript paging

Я не уверен, как вы делаете свою фильтрацию, но если у вас есть элемент, содержащий информацию о продукте, вы можете сохранить URL-адрес изображения в атрибуте data-xyz на нем:

<div id='product-123' data-image='/images/foo.png'>

Затем, когда ваш код делает это видимым, вы можете легко добавить к нему img:

var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
    img = document.createElement('img');
    img.src = imgsrc;
    prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
    prod.removeAttribute('data-image');
}

Изменить В комментарии в другом месте вы сказали, что используете jQuery. Если это так, перевод приведенного выше может выглядеть так:

var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
    $("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
    prod.removeAttr('data-image');
}

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

Причиной, по которой я использовал префикс data-, является проверка: с HTML5 вы можете определить свои атрибуты owwn data-xyz, и ваши страницы все равно пройдут проверку. В более ранних версиях HTML вам не разрешалось определять ваши собственные атрибуты (хотя на практике ни один крупный браузер не заботился), поэтому, если вы использовали свой собственный атрибут для этого, страница не будет проверяться.

Ссылки (w3.org):

Вне темы, но много этого материала становится намного проще, если вы используете библиотеку JavaScript, например jQuery, Closure, Prototype, YUI или любой из нескольких другие, чтобы сгладить грубые грани для вас. (Вы уже говорили, что используете jQuery.)

Ответ 2

Если вы просто хотите медленно загружать изображения, а остальная страница загружается, вы можете поместить изображения в качестве фона и не использовать тег <img>. Если вы используете тег <img>, изображение загружается во время загрузки страницы, поэтому загрузка страницы становится медленной. Однако фоновые изображения загружаются после того, как страница отображается пользователю. Пользователь может прочитать текст и посмотреть загрузку изображений через некоторое время.

Ответ 3

Я уверен, что это невозможно в простом HTML без какого-либо вмешательства Javascript.

В конце концов, если бы это можно было сделать без скриптинга, почему бы кто-нибудь его реализовал в Javascript в первую очередь?

Мой вопрос: сколько посетителей вы получаете, кто в наши дни не поддерживает Javascript? Уверен, что очень мало. И в любом случае, эти люди используются для того, чтобы сайты не были полностью работоспособны, когда у них отключен javascript; ваш сайт будет действительно лучше, чем большинство, если только разница, с которой им приходится мириться, - это более низкая скорость загрузки.

(ps - я полагаю, вы используете Jquery LazyLoad плагин для людей с поддержкой Javascript?)

Ответ 4

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

Ответ 5

Я написал следующий код для своего собственного сайта. Я использовал JQuery: 1. Назовите все классы, где U хотите ленивую загрузку с тем же именем, например "async" 2. Скопируйте реальное местоположение изображения из атрибута 'src' в 'alt' 3. После завершения загрузки страницы мой script скопирует все значения 'alt' в 'src' Посмотрите на пример. Это полный рабочий пример html:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript">
        $(document).ready(function(){
            $('img.async').each(function(i, ele) {
                 $(ele).attr('src',$(ele).attr('alt'));
            });
        });
        </script> </head> <body> <img class="async" title="Гороскопы" alt="http://virtual-doctor.net/images/horoscopes.jpg" width="135" height="135"/> 
</body>
</html>

Вы можете почувствовать скорость на реальном сайте, где я его использовал http://virtual-doctor.net/

Ответ 6

EDIT: Я перечитал ваш вопрос и заметил, что вы также хотите, чтобы это работало для людей с отключенным Javascript! Тогда да, мой ответ неприемлем, но я оставлю его для записи.

Вот несколько библиотек Javascript для Image Lazy Loading.

Они помогают загружать изображения, необходимые, когда элементы будут "видны", просто изменяя атрибут src изображения.

Важно. Я все еще изучаю, какая из этих библиотек Javascript лучше всего использовать. Сделайте свою домашнюю работу, я бы сказал, найдите время, чтобы найти лучший инструмент для работы. Мои требования обычно: license, dependencies, browser support, device support, weight, community и history.