Я использую бесконечную прокрутку в индексе моего веб-сайта, и я использую запрос ajax, чтобы получить json с 40 объектами. Затем я добавляю их с помощью цикла javascript. Но какое-то время немного замедляется.

Итак, мой вопрос: генерирует блоки html на стороне сервера, и использование jquery append может быть более эффективным, чем получение массива json и зацикливание на нем.

Спасибо и извините за мой плохой английский

 $.ajax({
                url: oScroll.route,
                type: 'post',
                data: {current: $('.item').size(), 'type': type},
                //Succès de la requête
                success: function(oData) {
                    if (oData.status == "success") {
                        oScroll.getHtml(oData);
                        oScroll.load = false;
                    } else {
//                        $('#my-special-modal').hide();
                        oScroll.load = false;
                    }
                }
            });

  getHtml: function(oData) {
        var items = [];
        for (var index in oData.results) {
            var item = oData.results[index];
            var html;
            html = '<article class="item opinion" >';
            html += '<div class="header-opinion">';
            html += '<div class="picto-cat"></div>';
            html += '<div class="name-cat">';
            html += item.shop_name;
            html += '<br />';
            html += '<div class="cat">';
            html += item.category_name;
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="average-stars">';
            html += '<p>';
            html += Number(item.opinion_avg).toFixed(1) + ' - ' + item.opinion_count + ' avis';
            html += '</p>';
            html += '</div>';
            html += '<div>';
            html += '<a href="'+Routing.generate('fo_shop_show', {iId:item.shop_id})+'"><img src="/images/shops/boxes/' + item.shop_image + '" /></a>';
            html += '</div>';
            html += '<div class="place">';
            html += item.shop_city;
            html += '</div>';
            html += '<div class="row  status-user">';
            if (item.opinion_message == 'islike') {
                html += item.user_firstname + ' ' + item.user_lastname[0] + '. a aimé ';
            } else {
                html += item.user_firstname + ' ' + item.user_lastname[0] + '. a noté ' + Number(item.opinion_rating / 2).toFixed(1);
                html += '</div>';
                html += '<div class="row message-user">';
                if (item.opinion_message.length > 217) {
                    html += item.opinion_message.substr(0, 217) + '...';
                } else {
                    html += item.opinion_message;
                }
                html += '</div>';
            }
            html += '<div class="footer-opinion">';
                html += '<div class="picto-user"><img src="images/user/avatars/'+item.user_avatar+'" /></div>';
                html += '<div class="message-date">';
                html += '<time><p><img src="/images/pictos_actions/clock.png"/>';
                html += item.opinion_date+'</p></time>';
                html += '</div>';
                html += '<div class="picto-action"></div>';
            html += '</div>';
            html += '</article>';
            items.push(html);
        }
        var $newElems = $(items.join(''));
        container.append($newElems);
        $newElems.css({opacity: 0});
        $newElems.imagesLoaded(function() {
            // show elems now they're ready
            $newElems.css({opacity: 1});
            container.masonry('appended', $newElems, true);
        });
    }
1
tannana 22 Янв 2014 в 16:05
Я не могу понять ваш вопрос, используете ли вы приложение MVC
 – 
Dinesh
22 Янв 2014 в 16:12
Да, я использую symfony2. Я использую ajax для загрузки массива json (содержит 40 объектов json). Затем я зацикливаюсь на нем, чтобы создать html div. И, наконец, я помещаю HTML на страницу. Но это может быть медленным. Поэтому я спрашиваю, эффективнее ли создавать и возвращать html с сервера. Затем добавляем его на страницу
 – 
tannana
22 Янв 2014 в 16:18
Я отредактировал свой пост. Спасибо.
 – 
tannana
22 Янв 2014 в 16:33

1 ответ

Лучший ответ

Javascript запускается в клиентском браузере, поэтому его скорость зависит от вычислительной мощности клиентского компьютера.

Обычно лучше создавать html на стороне сервера и отправлять ему готовый для добавления javascript.

РЕДАКТИРОВАТЬ: Если ваш сервер может справиться с этим, тогда сгенерируйте HTML там, но создание клиентской части разметки в последнее время становится популярным, особенно со всеми выходящими и более используемыми библиотеками javascript на стороне клиента.

1
Nagy Nick 19 Июн 2015 в 12:11