Как сделать чтоб pop up окно отображалось только после полной загрузки?

Question

[Masterstvo]

Подскажите пожалуйста кто знает!
Создается поп ап окно в конструкции DOM (методом append()) при нажатии на кнопку. Данные в это окно приходят с сервера с помощью AJAX. При нажатии на кнопку блок формируется видимо неравномерно, возникает ощущение блика (как будто на долю секунды в блоке другие данные). Можно ли сделать так что бы блок появлялся только полной своей загрузки? Или может что поправить в скрипте (примерный скрипт ниже)? Заранее спасибо!

$(document).ready(function() {
        $('html').on('click', '#add', function(){
            $.ajax({
                url: '/',
                type: 'POST',
                data: {name:'John'}
                }).done(function (data) {
                    var arr = JSON.parse(data);
                    var close = '<a class="close" id="rrr"><img src="/../web/image/close.png"></a>';
                    var names = '<h4 align="center">' + arr.product + '</h4>';
                    var img = '<p align="center"><img src="' + arr.image + '" alt="рубашка" class="ddd" width="230"></p>';
                    var price = '<h3 align="center">' + arr.price + ' Руб.</h3>';
                    $('body').append('<div class="b-popup"><div class="b-popup-content">'+ close + names + img + price + '</div></div>');
                });
        });
        $('html').on('click','#rrr', function(){
            $("div.b-popup").remove();
        });
    });

Comments

[Михаил Плюснин]

Можно попробовать использовать шаблонизатор(к примеру mustache.js), проблемы это не решит, но вам проще будет...

Answer 1

[Сергей Грибок]

Скрипт обернутый в $(document).ready() и так выполняеться после полной загрузки ДОМ за исключением картинок.
Для загрузки ДОМа с картинка используйте $(window).load() или яваскриптовский window.onload()