Sto costruendo un portfolio fotografico. Ho due colonne div adiacenti flottanti a sinistra, ciascuna contenente un lungo elenco di immagini dimensionate al 100% della larghezza delle colonne. Questo rende una bella griglia di foto orientata verticalmente. Tuttavia, la colonna di sinistra deve essere caricata completamente prima che venga caricata la colonna di destra, il che può richiedere molto tempo. Mi piacerebbe che le due colonne si caricassero simultaneamente dalle parti superiori, in modo che entrambe le immagini in cima alle colonne siano visibili prima che l'utente carichi la pagina.Caricamento pigro delle immagini simultaneamente su due colonne separate
Il mio tentativo di correggere ciò riguarda jQuery Lazyload. Tuttavia, non sembra voler funzionare correttamente. Anziché caricare le immagini mentre scorri la pagina, sta caricando l'intera colonna sinistra in una volta e quindi caricando l'intera colonna a destra. Mi piacerebbe aggiustarlo in modo che carichi prima le prime poche immagini in cima a ciascuna colonna e poi carichi le altre immagini mentre scorri.
Grazie in anticipo!
Javascript:
$(document).ready(function() {
$(".leftcol img").lazyload({
failure_limit : 4,
effect : "fadeIn",
threshold : 10
});
$(".rightcol img").lazyload({
failure_limit : 4,
effect : "fadeIn",
threshold : 10
});
$(window).trigger('scroll');
});
HTML:
<div class="leftcol col">
<div class='item'>
<a href='filename.jpg>
<img data-src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
<div class='item'>
<a href='filename.jpg>
<img data-src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
</div>
<div class="rightcol col">
<div class='item'>
<a href='filename.jpg>
<img data-src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
<div class='item'>
<a href='filename.jpg>
<img data-src='js/holder/holder.js/200x300' data-original='filename.jpg' alt='' />
</a>
</div>
</div>
CSS:
.item{
width:100%;
float: left;
margin-bottom:8px;
clear:both;
}
.item img{
width:100%;
}
.col{
max-width:650px;
width:45%;
float:left;
margin-right:12px;
}