Isotope plugin: do ajax on DIV only if DIV is shown

user_56717 0
Viewed 32

How could I do a load() ajax call on a div only when this div is being actually shown by the Isotope jquery plugin?

So far my ajax calls are triggered regardless of if they are made visible by Isotope or not, which is slowing down the page a lot, since I have dozens of them:

    <div id="container"><!-- starts #container -->

            <div class="color-shape all red circle">

                <script type="text/javascript">
                  $( document ).ready(function() {
                     jQuery('.ajax-red-circle').load('https://URL-1-HERE.com #interesting-element');
                  });
                </script>

                <div class="ajax-red-circle"></div>

            </div>

            <div class="color-shape all blue circle">

                <script type="text/javascript">
                  $( document ).ready(function() {
                     jQuery('.ajax-blue-circle').load('https://URL-2-HERE.com #interesting-element');
                  });
                </script>

                <div class="ajax-blue-circle"></div>

            </div>

            <!-- ETC ETC -->

    </div><!-- ends #container -->

...how to trigger them only if the div they "belong to" is actually rendered visible by Isotope?

My Isotope code is here (it combines two filters: Shape and Color):

<script type="text/javascript">
    $(window).load(function() {
        $(function(){
    
            var $container = $('#container'),
            filters = {};

            $container.isotope({
              itemSelector : '.color-shape',
              filter: '.all',
            });

            // filter buttons
            $('.filter a').click(function(){
            
                var $this = $(this);
                // don't proceed if already selected
                if ( $this.hasClass('selected') ) {
                    return;
                }
      
                var $optionSet = $this.parents('.option-set');
                // change selected class
                $optionSet.find('.selected').removeClass('selected');
                $this.addClass('selected');
      
                // store filter value in object
                // i.e. filters.color = 'red'
                var group = $optionSet.attr('data-filter-group');
                filters[ group ] = $this.attr('data-filter-value');
                // convert object into array
                var isoFilters = [];
                for ( var prop in filters ) {
                    isoFilters.push( filters[ prop ] )
                }
                var selector = isoFilters.join('');

                $container.isotope({ filter: selector });
      
                return false;
            });
        });
    });
</script>
jquery-isotope jquery
1 Answers

I used jQuery to navigate the difficulties and ended up with this code. A simple :visible selector did the trick:

        jQuery('#container .color-shape:visible').each(function(){
            jQuery(this).children('a.catego').each(function(){
                href = jQuery(this).attr('href');
            });
            jQuery(this).children('.content-tagged').load(href +' .content-item:first-child');
            //if empty: There are no posts with the requested tag.
        });

Now the ajax is run only if the Isotope divs are being shown. You can put this code on different places dependening on your Isotope project. For example, at the end of the script to fire up the default visible divs, and in some place when people click the menu items that will filter.

Best regards,

user_567170
Related