CODEWITHSUNDEEP
javascriptjqueryhtmljquery-isotope
bluemoon6790
bluemoon6790

Reputation: 487

Isotope filtering - abnormal spacing on loading only

I'm doing some maintenance on a PHP website that uses Isotope filtering, and I'm still learning Javascript. Because of this, I'm having trouble figuring out how to fix a problem with Isotope.

I have a page with 40 tiles in two separate sections. One of the sections works fine with no errors. But in the second section, when I load the page, it displays the last 10-12 tiles on top of each other (it varies, seemingly randomly).

However, whenever I click any of the filters, it works fine, and pushes them out to the proper spacing. So, the issue is only on the behavior during the initial load of the page.

Does anyone know what might be causing this sort of problem?

Upvotes: 0

Views: 154

Answers (1)

dave
dave

Reputation: 64657

Try changing document.ready to window.load, which will make it wait for images to download before running isotope.

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  $.isotope();
});

$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
 $.isotope();
});

Actually, reading the link 3rror404 posted, you can do

// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});

Upvotes: 2

Related Questions