Попытка заставить изображения загружаться и появляться в isotope последовательно

Я потратил 2 дня, читая каждый бит кода, который могу найти по этому поводу, и не могу найти решение и применить его к моей ситуации. Я надеюсь, что кто-то может помочь.

У меня есть серия продуктов / коробок (которые содержат изображения, слова и т. Д.), Которые я динамически загружаю в контейнер изотопов с помощью php (из базы данных). Каждый продукт / коробка - это собственная упаковка изотопов ul.

Я хочу, чтобы общий контейнер изотопов был шириной в 3 столбца (если не происходит изменение размера).

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

Пользователь должен ждать целую вечность, поэтому я хочу, чтобы каждый ящик загружался в контейнер, последовательно заполняя строку 1 (столбец 1, затем столбец 2, затем столбец 3), затем переходите к заполнению строки 2 (столбец 1 и т. Д.) И т. Д. так что коробки / продукты могут загружаться ниже сгиба страницы без ведома пользователя. Поэтому я пытаюсь использовать imagesLoaded. Ничего из того, что я делаю, не работает.

Есть 3 компонента кода - 1. CSS, 2. PHP / HTML, 3. JS. мой ниже:

$(window).load(function(){
		
	var $container = $('#filter-container');
	$container.imagesLoaded(function(){
		$container.isotope({
			itemSelector: 'li',
			filter: '*',
			resizable: false,
			columnWidth: 300,
			animationEngine: 'best-available'
		});
		
		var $tour = $('#filter-container.li');
		$container.append($tour).isotope('appended',$tour);
	});
	
		
	// filter buttons
		
	$('#filter-buttons a').click(function(){
	
		// select current
		var $optionSet = $(this).parents('#filter-buttons');
	    $optionSet.find('.selected').removeClass('selected');
	    $(this).addClass('selected');
    
		var selector = $(this).attr('data-filter');
		$container.isotope({ filter: selector });
		return false;
	});
   
  	//##########################################
	// Resize event
	//##########################################
	
	$(window).resize(function() {
		
		var w = $(window).width();
		//console.log(w);
	
		$container_home.isotope('reLayout');
	
	}).trigger("resize");
  
});
#filter-buttons {
  text-align: center;
  background: url(../img/filter.png) no-repeat top center;
  height: 47px;
  margin-bottom: 20px;
}
#filter-buttons li {
  display: inline-block;
  margin-bottom: 0px;
}
#filter-buttons li a {
  display: block;
  text-decoration: none;
  margin-bottom: 0px;
  margin-right: 5px;
  line-height: 47px;
  color: #cb5432;
}
#filter-buttons li .selected {
  background: url(../img/filter-arrow.png) no-repeat center top;
}
.cf:after,
.cf:before {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
.wrapper {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
#filter-buttons {
  text-align: center;
  background: url(../img/filter.png) no-repeat top center;
  height: 47px;
  margin-bottom: 20px;
}
#filter-buttons li {
  display: inline-block;
  margin-bottom: 0px;
}
#filter-buttons li a {
  display: block;
  text-decoration: none;
  margin-bottom: 0px;
  margin-right: 5px;
  line-height: 47px;
  color: #cb5432;
}
#filter-buttons li .selected {
  background: url(../img/filter-arrow.png) no-repeat center top;
}
.cf:after,
.cf:before {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
.wrapper {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.ribbon {
    position: absolute;
    right: -8px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    height: 100px;
    text-align: right;
}		
.ribbon span {
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    /* text-transform: uppercase; */
    text-align: center;
    line-height: 26px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 115px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#F70505 0%, #8F0808 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 20px;
    right: -26px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
/*RAF */
div .raf {
    width: 40px;
    height: 36px;
    border-radius: 20%;
    margin-left: 4px;
    margin-top: -7px;
    background-image: url("//eternalcitytours.com/assets/ico/android-icon-36x36.png");
}
.feature {
  width: 1000px;
  margin-left: -65px;
  list-style-type:none
}
.feature li {
  position: relative;
  background: #f3e4c8;
  width: 30%;
  margin-bottom: 50px;
  margin-left: 20px;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
}
.feature li .thumb {
  display: block;
  margin: 10px;
  width: 280px;
}
.feature li .thumb img {
  max-width: 100%;
}
.feature li .caption {
  padding: 10px 10px 20px 10px;
  text-align: center;
}
.feature li a{
  color: #cb5432;
}
.feature li .thumb {
  position: relative;
}
.feature li .thumb .date {
  position: absolute;
  bottom: -25px;
  left: 110px;
  display: block;
  -moz-border-radius: 40px 40px 40px 40px;
  -webkit-border-radius: 40px 40px 40px 40px;
  border-radius: 40px 40px 40px 40px;
  height: 50px;
  width: 46px;
  background: #f3e4c8;
  float: left;
  font-family: mensch;
  padding-top: 10px;
}
.feature li .thumb .date span {
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
}
<div class="wrapper">
<ul id="filter-buttons">
				<li><a href="#" data-filter="*" class="selected">All Tours | </a></li>
				<li><a href="#" data-filter=".Top">Top Tours | </a></li>
				<li><a href="#" data-filter=".Christian">Christian Tours | </a></li>
				<li><a href="#" data-filter=".Art">Art Tours | </a></li>
<li><a href="#" data-filter=".Romance">Romance Tours | </a></li>
<li><a href="#" data-filter=".Food">Food Tours | </a></li>
<li><a href="#" data-filter=".Day">Day Trips | </a></li>
<li><a href="#" data-filter=".Kids">Kids</a></li>
			</ul>
		<!-- Filter container -->
				<ul id="filter-container" class="feature cf" itemscope itemtype="http://schema.org/EventReservation">
        <?php 
				$tcount=count($tours);
				$tcount=$tcount-1;
				for($i=0; $i<=$tcount;$i++){
				 echo "
					<li class=\"".$tours[$i]['location']."\">
						    <a href=\"".$tours[$i]['nav_url']."\"><div class=\"ribbon\"><span>From € ".$tours[$i]['action']."</span></div></a>
                            <a href=\"".$tours[$i]['nav_url']."\" class=\"thumb\">".$tours[$i]['img']."
							<div class=\"date\"><div class=\"raf\"></div></div>
							</a>
                            <h4 class=\"tour_title\" itemprop=\"name\">".$tours[$i]['title']."</h4>
                            <div class=\"caption\" itemprop=\"description\">".$tours[$i]['blurb']."</div>
							<p><a href=\"".$tours[$i]['nav_url']."\" title=\"".$tours[$i]['title']."\" class=\"tours btn btn-primary\" itemprop=\"url\" role=\"button\">View Tour &rarr;</a></p>
                    </li>
					";
				}?>
				</ul><!-- ENDS Filter container -->

Может ли кто-нибудь помочь мне понять, как загружать каждый продукт / тур / коробку последовательно по каждой строке при загрузке страницы? живой пример страницы в том виде, в каком она сейчас находится по адресу здесь

0
0
238
1

Ответы 1

Правильно - решил.

Общая проблема в том, что у меня была первая строка JS-кода как

$(window).load( function() {

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

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

var $container = $('#filter-container').isotope({
        itemSelector: 'li',
        filter: '*',
        resizable: false,
        columnWidth: 'li',
        animationEngine: 'best-available'
    });

    $container.imagesLoaded().progress( function(){
        $container.isotope('layout');
    }); 

надеюсь, что это поможет кому-то другому.

Другие вопросы по теме