Стоп Кладка изменение размера, когда не все изображения загружаются

Я использую масонство (и imagesLoaded) с Wordpress:Стоп Кладка изменение размера, когда не все изображения загружаются

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

и мой сайт включает в себя ряд изображений, колеблется в пределах от 1 до 8 МБ. Я заметил, что время загрузки очень длинное (я не использую разбиение на страницы на Wordpress, поэтому страница загружает весь контент), и сетка сохраняет размер, пока все изображения не будут загружены.

Есть ли способ исправить это?

Это мои пользовательские ЯШ:

$(document).ready(function() { 

    let $masonryGrid = $('.masonry-grid'); 
    $masonryGrid.imagesLoaded(() => { 
     $masonryGrid.masonry({ 
      columnWidth: '.grid-sizer', 
      itemSelector: '.grid-item', 
      gutter: 0, 
      percentPosition: true, 
      transitionDuration: 0 
     }); 
    }); 
});

источник

2017-01-19 paranza

сжимать изображения https://tinypng.com/ –

Спасибо, что-нибудь еще я могу сделать как часть самого масонства? – paranza

Изображения с размером выше 500 КБ могут быть очень проблематичными, 8 МБ - это слишком много для веб-изображения. Ваш сайт остановится при загрузке, и пользователи уйдут, если он загрузится дольше 5-10 секунд ... –

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

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

image001.jpg 
image001_thumb.jpg

Затем отдельные элементы изображения будут автоматически начать загрузку полной версии:

<img src="image001_thumb.jpg" onload="this.src=this.src.replace('_thumb','');" />

И если вы не можете непосредственно влиять на элементы изображения, как это, добавьте в ваша обычная функция .ready (это пример, который повлиял бы на все изображения, чтобы дать вам представление, вы должны отфильтровать только изображения, которые находятся внутри сетки)

var images = document.getElementsByTagName('img'); 
for(var i=0;i<images.length;i++){ 
// If the image is already loaded, change it immediately 
if(images[i].naturalWidth != 0) images[i].src = images[i].src.replace('_thumb',''); 
else // If not, give it an onLoad function to change after it does 
images[i].onload = function(){ 
    this.src = this.src.replace('_thumb',''); 
} 
}

источник

2017-01-28 22:34:24 ElDoRado1239

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

Смотрите extra exemples section на Кладка Документах

Итеративно раскрывают детали после загрузки каждого изображения. Смотрите описание на issue #501

источник

2017-01-28 22:50:40 Alucard

Стоп Кладка изменение размера, когда не все изображения загружаются

ответ

Смежные вопросы