0
我有600頁元素。當所有的元素加載頁面doesen't有滯後，但之後所以更多元素頁
元
$.each(dishs, function(v, k){
$.each(k.dishs, function(v, dish){
if(check_criterion(dish.criterion_first, dish.criterion_second) && dish.price >= default_settings.min && dish.price <= default_settings.max && dish.name.toLowerCase().indexOf(default_settings.search) + 1)
show = ' style="display: block;" ';
else
show = ' style="display: none;" ';
html += '<form crit_2="' + dish.criterion_second + '" crit_1="' + dish.criterion_first + '" name="'+ dish.name +'" price="'+ dish.price +'" '+ show +' action="/order/" method="post" class="add_to_cart_close block col-md-4 col-sm-6 col-xs-12">';
html += '<input type="hidden" value="' + dish.id + '" />';
html += '<div class="item">';
html += '<div class="b-img" style="position: relative;">';
html += '<div style="position: absolute; width: 100%; top: 0px; left: -5px;">';
if(dish.criterion_first){
html += '<div class="ic criterion_' + dish.criterion_first + '" style="">';
html += '<img alt="" src="/static/img/ci' + dish.criterion_first + '.png" width="20px" height="20px">';
html += '<span>' + criterion_list["item" + dish.criterion_first ] + '</span>';
html += '</div>';
}
if(dish.criterion_second){
html += '<div class="ic criterion_' + dish.criterion_second + '" style="">';
html += '<img alt="" src="/static/img/ci' + dish.criterion_second + '.png" width="20px" height="20px">';
html += '<span>' + criterion_list["item" + dish.criterion_second ] + '</span>';
html += '</div>';
}
html += '</div>';
html += '<div class="img">';
if(!dish.image) {
html += '<div style="display: block; width: 100%; height: 170px; background-image: url(/static/img/no_image.png); background-position: 50%; background-size: cover;" ></div>';
} else {
html += '<div style="display: block; width: 100%; height: 170px; background-image: url(/media/' + dish.image + '); background-position: 50%; background-size: cover;" ></div>';
}
html += '</div>';
html += '<div class="slider-img">';
html += '<div class="slider">';
if(!dish.image_all.length) {
html += '<div class="slide">';
html += '<img data-toggle="modal" data-target="#modalPopup_' + dish.id + '" alt="" src="/static/img/no_image.png">';
html += '</div>';
} else {
$.each(dish.image_all, function(v, image) {
html += '<div class="slide">';
html += '<a data-toggle="modal" data-target="#modalPopup_' + dish.id + '" href="#" onclick="return false;" style=" display: block; width: 100%; height: 276px; background-image: url(/media/'+ image +'); background-position: 50%; background-size: cover;" ></a>';
html += '</div>';
});
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="title"><a href="#">' + dish.name + '</a></div>';
if(dish.weight) {
html += '<div class="massa">' + dish.weight + '</div>';
}
html += '<div class="desc" style="height: 120px; overflow: hidden;">';
html += dish.description;
html += '</div>';
html += '<div class="bottom">';
html += '<div class="left">';
html += '<div class="cost"><span class="fix_price">' + dish.price + '</span> <span class="rub">a</span></div>';
html += '</div>';
html += '<div class="right">';
if(dish.supplements.length) {
html += '<input data-toggle="modal" data-target="#modalPopup_' + dish.id + '" type="submit" class="btn btn-default" value="ЗАКАЗАТЬ">';
} else {
html += '<input dish_id="' + dish.id + '" shop_id="' + dish.shop_id + '" type="submit" class="add_to_cart btn btn-default" value="ЗАКАЗАТЬ">';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</form>';
html += '<div class="modal fade product-modal bs-example-modal-lg" id="modalPopup_'+ dish.id +'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
html += '<div class="modal-dialog modal-lg" role="document">';
html += '<div class="modal-content">';
html += '<div class="modal-body">';
html += '<div class="row">';
html += '<!-- slider -->';
html += '<div class="col-sm-4">';
html += '<ul>';
$.each(dish.image_all, function(v, img){
html += '<li style="width: 270px;"><img src="/media/'+ img +'" /></li>';
});
html += '</ul>';
html += '<div class="slider">';
html += '<div class="icons">';
html += '<span class="likes"><span class="icon glyphicon glyphicon-heart"></span> 4,8</span>';
html += '<span class="expert-count"><img src="/static/img/expert.png" width="22px"> 3</span>';
html += '<span class="reviews-count"><img src="/static/img/speach.png" width="20px"> 5</span>';
html += '</div>';
html += '<div class="reward">';
html += '<span class="rewi1"><img src="/static/img/ico/i1.png" width="20px"> Блюдо без мяса</span>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<!--/slider -->';
html += '<div class="info-product col-sm-8">';
html += '<div class="headline">' +dish.name + '</div>';
html += '<div class="product-value">Вес '+ dish.weight + ' </div>';
html += '<div class="product-description">';
html += '<p style=" overflow: hidden;padding: 5px; text-overflow: ellipsis;" >';
html += dish.description;
html += '</p>';
html += '</div>';
if(dish.criterion_first || dish.criterion_second) {
html += '<div class="product-composition"><b>Состав:</b>';
if(dish.criterion_first) {
html += criterion_list[dish.criterion_first];
}
if(dish.criterion_second)
{
html += criterion_list[dish.criterion_second];
}
html += '</div>';
}
html += '<div class="supplements">'
if(dish.supplements.length) {
html += '<div class="row">';
html += '<div class="title">Добавки:</div>';
$.each(dish.supplements, function(v, supp){
html += '<div class="row-check col-sm-6">';
html += '<input price="'+ supp.price + '" class="supplement_price" value="'+ supp.id +'" type="checkbox">';
html += '<label>';
html += '<span class="name">';
html += supp.name;
html += '</span>';
html += '<span class="text-right price-plus fix_price">';
html += supp.price;
html += '</span> р.';
html += '</label>';
html += '</div>';
});
html += '</div>';
}
html += '<div class="total-price">';
html += '<div class="col-sm-12 line"></div>';
html += '<div class="row">';
html += '<!--<div class="col-sm-4 col-xs-6">Цена:</div>';
html += '<div class="col-sm-8 text-right" style="margin: 0 0 10px 0;">';
html += '<span class="fix_price">'+ dish.price +'</span><span> р.</span></div>-->';
html += '<div class="col-sm-4 col-xs-6">Цена:</div>';
html += '<div class="col-sm-8 text-right">';
html += '<span class="fix_price supplement_total_price" price="' + dish.price + '" >';
html += dish.price;
html += '</span>';
html += '<span style="margin-right: 50px"> р.</span>';
html += '<button shop_id="' + dish.shop_id + '" dish_id="' + dish.id + '" data-dismiss="modal" class="add_to_cart btn btn-btn-cart">Заказать</button>';
html += '</div>';
if($('#user').val()) {
var display = 'block';
if(dish.favsdish) var display = 'none;';
var dis_fav = 'none';
if(dish.favsdish) var display = 'block';
html += '<div class="col-sm-4 col-xs-6"> </div>';
html += '<div class="col-sm-8 text-right" dish_id="' + dish.id + '" style="margin: 10px 0;">';
html += '<button dish_id="' + dish.id + '" style="margin-left: auto; cursor: pointer; display:' + display + ' " class="add_to_favs btn btn-btn-cart" >В избранное</button>';
html += '<button dish_id="' + dish.id + '" style="margin-left: auto; cursor: pointer; display: '+ dis_fav +'" class="remove_from_favs btn btn-btn-cart" >Убрать из избранного</button>';
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<!--';
html += '<div class="row">';
html += '<div class="complete-product">';
html += '<div class="headline col-sm-12">Это блюдо входит в обед:</div>';
html += '<div class="item col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Суп "Кокетка"</div>';
html += '</div>';
html += '<div class="item col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Грибочки "А ля рус"</div>';
html += '</div>';
html += '<div class="item last col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Мохнатое мороженое</div>';
html += '</div>';
html += '<div class="product-cart col-md-3 col-xs-12 col-sm-3 text-right">';
html += '<span class="price">345 р.</span><button class="btn btn-cart">Заказать обед</button>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '-->';
html += '<div class="expert">';
html += '<div class="headline">Мнение эксперта</div>';
html += '<div class="row">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '<div class="show-more"><a href="#">Показать больше ответов экспертов</a></div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="expert reviews">';
html += '<div class="headline">Отзывы о блюде (7)</div>';
html += '<!-- item -->';
html += '<div class="row item">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '</div>';
html += '</div>';
html += '<!--/item -->';
html += '<!-- item -->';
html += '<div class="row item">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '</div>';
html += '</div>';
html += '<!--/item -->';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
});
$('#menu_' + k.sm).next().html(html);
html = '';
check_visible_catalogs();
});
我從AJAX數據生成：比我插入它 網站得到的功能顯示和隱藏元素，因此我嘗試表演和隱藏元素600
$('[id^="menu_"]').hide();
$('[id^="menu_"]').next().hide();
比：
$('[id^="menu_"]').show();
$('[id^="menu_"]').next().show();
$('[id^="menu_"]').next().children().show();
我得到了如此強大的滯後......
我該如何解決這個滯後問題？
確保5 plase W8我會更新問題 –
你可能運行到與瀏覽器重繪所有不同元素的問題，由於你的操作其中。您需要使用瀏覽器的調試工具，並查看性能分析工具，以幫助縮小問題範圍。沒有簡單的方法來解決性能問題。儘管如此，頁面上的數量會減少。服務器端渲染也是有益的。雖然我不確定你的情況，但因爲它含糊不清。 – bj7
你有沒有考慮過使用像這樣的模板引擎：http：//handlebarsjs.com/？ –