Photo Gallery Filter Looks Corrupt on 1st Load But looks fine when I Refresh?

Question

This is weird. When I first go to my website my portfolio Gallery looks corrupted but when I refresh everything looks fine. If you can look at my website on your computer and tell me if you are seeing the same thing I would appreciate it. (my website is not mobile friendly yet)

Also please let me know how I can fix this. I am using Jquery & Isotope for this feature.

http://ruben123.com/

Answer 1

Ok I didnt get an answer on here or anywhere else and after spending 2 days trying to figure it out with no luck I paid a guy from India $40 to find out the answer.

Basicly I needed to update the javascript code and add this code below.

    $(window).on('load', function(){
    //Original Code Goes inside here
});

Code Before

     $('.grid').isotope({
        itemSelector: '.grid-item',
      });
      
      // filter items on button click
      $('.filter-button-group').on( 'click', 'li', function() {
        var filterValue = $(this).attr('data-filter');
        $('.grid').isotope({ filter: filterValue });
        $('.filter-button-group li').removeClass('active');
        $(this).addClass('active');
      });

CODE AFTER

    $(window).on('load', function(){
      $('.grid').isotope({
        itemSelector: '.grid-item',
      });
      
      // filter items on button click
      $('.filter-button-group').on( 'click', 'li', function() {
        var filterValue = $(this).attr('data-filter');
        $('.grid').isotope({ filter: filterValue });
        $('.filter-button-group li').removeClass('active');
        $(this).addClass('active');
      });
    });

So what I think what was happening is that because I had a lot of images the isotope was not working properly.

After this change was made the images been uploading correctly on local host and online. I posting this answer just in case someone else runs into this same issue.