Я пытаюсь скомпоновать масонство и инструменты moo lazyload, но они оба не очень хорошо сочетаются вместе, хотя это возможно просто потому, что я немного бесполезен при кодировании!
Каменная кладка работает на на этой странице.
Однако, когда я пытаюсь собрать его вместе с lazyload, он, кажется, полностью испортит. Кто-нибудь знает, как реализовать оба плагина вместе?
Я потратил 6 дней, пытаясь понять это, и это моя последняя надежда ha!
Спасибо
Недавно я должен решить это для одного из моих сайтов. Я попробовал несколько способов, и это похоже на работу.
1. Первый метод:
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: function(containerWidth){
return containerWidth / 12;
}
});
$('.item img').addClass('not-loaded');
$('.item img.not-loaded').lazyload({
effect: 'fadeIn',
load: function() {
// Disable trigger on this image
$(this).removeClass("not-loaded");
$container.masonry('reload');
}
});
$('.item img.not-loaded').trigger('scroll');
});
Этот метод хорош, но у него есть один недостаток. Компоновка сетки может не сохраняться прежней, так как время masonry.reload() зависит от времени загрузки каждого изображения (т.е. то, которое должно быть загружено первым, может закончиться только позже)
2. Второй метод: Посмотрите на сайты, как на интерес, я думаю, это не следует первому методу, потому что у них есть контейнеры, расположенные еще до того, как загружено любое изображение, поэтому я пытался добиться только отображения коробок с таким же соотношением, как у изображений. Шаги:
{image1: [300,400],image2: [400,500]})http://jsfiddle.net/nathando/s3KPn/4/
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: function(containerWidth){
return containerWidth / 12;
}
});
$('.item img').lazyload({
effect: 'fadeIn'
});
$('.item img').trigger('scroll');
});
[отредактировано для добавления jsfiddle для второго метода]
Примечание:
/*display: none */ и прокомментировать display: block для #container.fluid .item imgура
Я отправил тот же ответ на статью, посвященную другим вопросам. Если у вас возникли проблемы с образами, я нашел решение на сайте ниже, хотя это на японском языке.
http://www.webdesignleaves.com/wp/jquery/1340/
Надеюсь, это поможет.
Точка использования следующая;
$('img.lazy').load(function(){ ... })
HTML
<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>
</div><!-- end of .work_item-->
....
</div><!-- end of #works_list -->
JQuery
$("img.lazy").lazyload({
effect: 'fadeIn',
effectspeed: 1000,
threshold: 200
});
$('img.lazy').load(function() {
masonry_update();
});
function masonry_update() {
var $works_list = $('#works_list');
$works_list.imagesLoaded(function(){
$works_list.masonry({
itemSelector: '.work_item',
isFitWidth: true,
columnWidth: 160
});
});
}
softk5 не работал на меня и заставлял замораживать большую часть браузера. Вот мой следующий код и его работа для меня.
jQuery(document).ready(function(){
jQuery("img.lazy").lazyload({
effect: 'fadeIn',
effectspeed: 1000,
threshold: 200,
load:function(){
var $container = jQuery('.is_masonry');
$container.masonry({
}).imagesLoaded(function() { $container.masonry(); });
}
});
});
Причина в том, что масонство должно знать размеры изображения, чтобы правильно расставлять предметы. Однако LazyLoad задерживает загрузку изображения до тех пор, пока изображение не появится в окне просмотра, а это означает, что изображение не будет иметь размеров (или размеры изображения фиктивного/замещающего изображения будут установлены как img src).
может быть, у кого-то тоже будут проблемы, надеюсь на помощь.
чтобы заставить его работать с wordpress photoswipe-masonry theme невозможно без модификации плагина.
next связан с этой модификацией и просто с кладкой
a) lazyload использовать атрибут data-original = "xxx" для установки URL-адреса изображения. НЕ src. вам нужно разместить несколько заполнителей. может быть 1x1 пиксель, который будет загружен без lazyload.
b) этот заполнитель должен покрыть ВСЕ пространство для будущего lazyloaded изображения, или каменная кладка сделает все изображения видимыми как lazyloading view. потому что перед загрузкой изображений он имеет нулевой размер 0px x 0px. и все изображения вставляются в видимую область перед загрузкой. Lazyload считает все видимым и загружает все.
чтобы упорядочить ВСЕ пространство для будущего изображения, которое вам нужно установить
стиль = "ширина: xxpx; высота: xxpx;"
just width = "xx" и height = "xx" недостаточно
поэтому место для изображения стало следующим:
<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;">
затем примените ленивую нагрузку обычным способом и кладку. в любом порядке.
Важно - ширина обновления масонства до размера столбца, но не высота, поэтому, если ваш размер столбца = 50 пикселей, вам нужно вычислить высоту заполнителя
new_height = 50/actual_width * actual_height;
поэтому для темы wordpress нужна
$scaled_height =$options['thumbnail_width']/$full[1] * $full[2];
.....
<img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/>
....
затем добавьте новые строки ниже кластеров init
var reloading = false;
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){
\$('.msnry_item img').lazyload({
effect: 'fadeIn',
//container: container,
threshold : 200,
skip_invisible : false,
failure_limit : 5,
load: function() {
if( ! reloading )
{
reloading = true;
setTimeout(function(){
container.masonry('reload');
reloading = false;
}, 500);
}
}
});
});
Попробуйте повторно использовать масонство в "callback_loaded" в LazyLoad
var ll = new LazyLoad({
elements_selector: "img[data-src]",
callback_loaded() {
masonry = new Masonry(grid, {
itemSelector: '.img-selector',
});
}
});
Далее добавлен код ниже
callback_loaded() {
masonry = new Masonry(grid, {
itemSelector: '.img-selector',
});
}