CODEWITHSUNDEEP
jqueryjquery-masonry
hyperrjas
hyperrjas

Reputation: 10744

Slow load first images masonry

I'm using masonry plugin in my website

My problem is that the first 20 images take a long time to load and until fully charged and remain in the left side of the page to form a column of images.

How can I speed up the first twenty images from my web page with this plugin?

Thank you very much

Upvotes: 1

Views: 3316

Answers (2)

Dave Cottrell
Dave Cottrell

Reputation: 292

Along with the CDN as mentioned above or might I suggest getting smaller images. Either way, there is an imagesLoaded plugin that goes hand in hand with masonry that ensures the images have completely loaded before rendering the boxes.

Grab the plugin here.

Once you've installed the plugin wrap your masonry call like so:

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});

Another great plugin to use with Masonry is infinite-scroll. Let me know if you want help setting it up as well.

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You can us a CDN or load them from a different domain. Browsers typically can transfer eight files at once per domain. Using a different domain or CDN allows you to bypass this limitation.

Upvotes: 1

Related Questions