CODEWITHSUNDEEP
jquerycssimagelazy-loading
skiindude22
skiindude22

Reputation: 509

Lazy loading of images in two separate columns simultaneously

I'm building a photography portfolio. I have two adjacent div columns floated left, each containing a long list of images sized to 100% of the width of the columns. This makes for a nice vertically-oriented grid of photos. However, the left column needs to load entirely before the right column starts to load, which can take a good deal of time. I'd like for the two columns to load simultaneously from the tops, so that both of the images at the tops of the columns are visible first as the user loads the page.

My stab at correcting this involves jQuery Lazyload. However, it doesn't seem to want to work properly. Rather than loading images as you scroll the page, it is loading the entire left column at once, and then loading the entire right column. I'd like to fix this so that it loads the first few images at the tops of each column first, and then loads the other images as you scroll.

Thanks in advance!

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;
}

Upvotes: 7

Views: 2172

Answers (1)

MrDBA
MrDBA

Reputation: 430

I had the same issue and increasing the failure_limit parameter to something like 9999 did the trick.

The documentation (http://www.appelsiini.net/projects/lazyload) says "Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high."

This would be classified as "funky".

Upvotes: 5

Related Questions