JQuery. Get загрузки содержимого полностью перед рендерингом - PullRequest
Новая
       17

JQuery. Get загрузки содержимого полностью перед рендерингом

2 голосов
/ 04 марта 2012

Есть ли способ визуализации контента только после его полной загрузки с использованием AJAX / get / load с jQuery?

В текущем состоянии загрузчик показывает, пока отображается «HTML»загружается, но как только это будет сделано, он начинает рендеринг.В html много изображений, поэтому они начинают загружаться независимо после рендеринга.

Это хорошая практика дизайна?По моему мнению, после того, как загрузчик исчезает, все должно отображаться на 100%, но, конечно, это увеличит время загрузки.

Могу ли я добиться этого без всяких «взломов»? 

$(document).ready(function() {

    $('#clicks').click(function(){

        $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");

        $.get("moreProjects.html", function(datas){
            $('#portfolio').append(datas);
        }, 'html').complete(function() { 
            $('#loader').hide();
        });

        return false;

    });

});

Ответы [ 3 ]

1 голос
/ 04 марта 2012

Проверьте эту ссылку, последнее сообщение: Подождите, пока все изображения не будут загружены

По моему мнению, вам нужно сохранить HTML в переменной, а затем отфильтроватьтеги img и передайте его функции _loadimages в сообщении, которое я вам задаю для настройки полного обратного вызова.

Примерно так: 

var $retData = $(datas);
var $imgs = $retData.find('img');
_loadimages($imgs,function(){
   $('#portfolio #content').append($retData);
});
1 голос
/ 04 марта 2012

Получите HTML-код, разместите его на своей странице или предварительно загрузите с помощью JS. Если вы разместите его на своей странице, изображения не могут быть скрыты, если они должны быть загружены, но они могут быть размещены на экране. Когда изображения загружены, переместите HTML в элемент портфолио.

Приведенный ниже код является просто примером, не проверенным, и функция загрузки, вероятно, сработает на первом загруженном изображении, я думаю? Если это так, вам нужно будет посчитать изображения, разместить функцию загрузки на каждом изображении, а затем показать HTML-код после загрузки всех изображений, или вы можете попробовать просто прикрепить функцию загрузки к последнему изображению в вашем HTML, но нет гарантируйте, что последнее изображение в разметке также является последним загружаемым, но это часто так.

Также может быть проблема с загрузкой, если изображения кэшируются браузером, если вам необходимо найти другое решение, или поворот кэширования в $ .ajax! 

$('#clicks').on('click', function(){
    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
    var jqxhr = $.ajax({
        type:'GET',
        url: 'moreProjects.html',
        datatype: 'html',
        done: function(datas) {
            $('<div id="somediv"></div>').append(datas)
                                         .css({position: 'fixed', left: -5000})
                                         .appendTo('body');
        }
     });
     jqxhr.always(function() {
        $('img', '#somediv').on('load', function() {
            $('#loader').remove();
            $('#portfolio').append($('#somediv').contents());
        });
     });
     return false;
});
1 голос
/ 04 марта 2012

Вы всегда можете сохранить данные, возвращенные в переменную, а затем добавить их в функцию complete: 

var returnedData;
$('#clicks').click(function(){

    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");

    $.get("moreProjects.html", function(datas){
        returnedData = datas;
    }, 'html').complete(function() { 
        $('#portfolio').append(returnedData);
        $('#loader').hide();
    });

    return false;

});

Другой вариант - использовать скрытый контейнер div для загрузки содержимого, а затем отобразить по завершении: 

$('#clicks').click(function(){

    $('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
    $('#portfolio').append("<div id='content' style='display:none'></div>");

    $.get("moreProjects.html", function(datas){
        $('#portfolio #content').append(datas);
    }, 'html').complete(function() { 
        $('#portfolio #content').show();
        $('#loader').hide();
    });

    return false;

});
...