javascript - Speed up Response Time - Isotope with 200+ products on one html page -
i have webpage more 8000 lines of html render. i'm using jquery-isotope
in combination imglazyload
product images.
that means "filterable" content on 1 page. using this
(function() { var $container = $("#isotopecontainer"); $container.imagesloaded(function() { $container.isotope({ itemselector: ".span3", layoutmode: "fitrows", onlayout: function() { $container.trigger("scroll"); }, getsortdata: { price: function($elm) { return $elm.data("price"); }, name: function($elm) { return $elm.find(".isotope--title").text(); }, popularity: function($elm) { return $elm.data("popularity"); } } }); // jquery ui slider var preparecurrency = function(value) { return webmarketvars.currencybefore ? webmarketvars.currencysymbol + value : value + webmarketvars.currencysymbol; }; var $slider = $(".jqueryui-slider-container > div"); $slider.slider({ range: true, min: webmarketvars.pricerange[0], max: webmarketvars.pricerange[1], values: webmarketvars.pricerange, step: webmarketvars.pricestep, slide: function(ev, ui) { $(this).parent().siblings(".min-val").val(preparecurrency(ui.values[0])); $(this).parent().siblings(".max-val").val(preparecurrency(ui.values[1])); }, change: function() { updateisotopefiltering(); }, create: function() { var $sliderparent = $(this).parents(".accordion-body"); $sliderparent.find(".min-val").val(preparecurrency($(this).slider("values", 0))); $sliderparent.find(".max-val").val(preparecurrency($(this).slider("values", 1))); } }); // ========== // = filters sidebar = // ========== var $selectableelms = $(".sidebar-filters .selectable"); $selectableelms.click(function(ev) { ev.preventdefault(); $(this).toggleclass("selected"); updateisotopefiltering(); }); $(".sidebar-filters .accordion-toggle").click(function() { settimeout(updateisotopefiltering, 350); }); $("#removefilters").click(function(ev) { ev.preventdefault(); $selectableelms.removeclass("selected"); updateisotopefiltering(); }); var updateisotopefiltering = function() { var selectedelms = $(".sidebar-filters .in").find(".selectable.selected[data-target]").not(".detailed"), detailedelms = $(".sidebar-filters .in").find(".detailed.selected[data-target]"), filterstring, filter, types = []; if (selectedelms.length > 0 || detailedelms.length > 0) { $("#removefilters").fadein(); } else { $("#removefilters").fadeout(); } if (selectedelms.length < 1) { filterstring = ".isotope-container .span3"; } else { var filterarr = []; selectedelms.each(function() { var data = $(this).data("target"); if ("undefined" !== typeof data) { filterarr.push($(this).data("target")); } }); filterstring = filterarr.join(","); } // basic filtering filter = $(filterstring); // slider price filtering, after have right categories if ($slider.parents(".accordion-body").hasclass("in")) { filter = filter.filter(function() { var $this = $(this); return $this.data("price") >= $slider.slider("values", 0) && $this.data("price") <= $slider.slider("values", 1); }); } // more precise filters size, color, brand ... detailedelms.each(function() { types.push($(this).data("type")); }); types = _.uniq(types); if (detailedelms.length > 0) { _.each(types, function(type) { var allowedvalues = []; detailedelms.filter('[data-type="' + type + '"]').each(function() { allowedvalues.push($(this).data("target")); }); filter = filter.filter(function() { var $this = $(this); return _.some($this.data(type).split("|"), function(val) { return _.contains(allowedvalues, val); }); }); }); } $container.isotope({ filter: filter }); }; updateisotopefiltering(); // ========== // = sorting = // ========== $("#isotopesorting").change(function() { var parameters = jquery.parsejson($(this).val()); parameters.sortascending = "true" === parameters.sortascending ? true : false; $container.isotope(parameters); }); $("#isotopesorting").trigger("change"); }); })(); $("img.lazy").lazyload({ event: "scroll", effect : "fadein", threshold : 100, failure_limit: math.max($("img.lazy").length - 1, 0) });`
minify html, css , js activated , render-blocking content moved end. not want paging isotop filtering not working anymore. there soultion?
Comments
Post a Comment