Как ускорить галерею изображений jQuery?

0

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

www.imagethrow.com/design-studio-all-throws.html

Это HTML-часть галереи:

<a class="imgLink" href="path-to-the-image.jpg">Image name</a>
<img src="" id="theImage">

JQuery:

<script>
$(document).ready(function(){
    $('.imgLink').click(function(){
        var imgPath = $(this).attr('href');
        $('#theImage').attr('src',imgPath);
        return false;
    });
});

Изображения были оптимизированы/сжаты, и я реализовал настройки управления кешем. Я был бы благодарен за любые предложения.

благодаря

Теги:

2 ответа

1
Лучший ответ

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

$(document).ready(function(){
    $('.imgLink').click(function(){
        var imgPath = $(this).attr('href');
        $('#theImage').attr('src',imgPath);
        return false;
    }).one("mouseenter",function(){
        var img = createElement("img");
        img.src = $(this).attr('href');
    });
});

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

Поделиться
  • 0
    Я попробую это ... Приведенный выше код предназначен для предварительной загрузки, когда пользователи находятся рядом со ссылками или для предварительной загрузки всех из них?
  • 0
    он предварительно загружается, когда пользователь наводит курсор на ссылку. если они щелкают очень быстро или для загрузки требуется несколько секунд, они все еще могут щелкнуть, прежде чем загрузка завершится.
Показать ещё 3 комментария
2

Jpg вместо Png

Используйте Jpg-изображения вместо Png. Изображение, подобное http://www.imagethrow.com/img/design-studio/2.5_Layer_Throw/Little_Caesars.png, можно легко вернуть с 380 КБ до 100 КБ, если вы сохраните его в высоком качестве (80) Jpg.

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

Также Jpg потерян, это означает, что при сохранении изображения будет потеряно небольшое количество деталей. Это вряд ли примечательно, но особенно не для фотографий. Кроме того, вы можете играть и выбирать оптимальный баланс между размером файла и качеством.

WebP

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

Предзагрузка

Кроме того, вы можете предварительно загрузить изображения. Это означает, что вы загружаете все изображения в фоновом режиме. Однако я бы не рекомендовал его для такой галереи. Пользователи, вероятно, не откроют каждое изображение, а предварительная загрузка занимает много полосы пропускания. Особенно для пользователей с ограниченным (мобильным) планом данных это не очень приятно, если вы загружаете несколько мегабайт изображений в фоновом режиме, когда они даже не хотят видеть их всех.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню