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

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -