Комбинация pAjax с активами loading

Я использую ajax для загрузки новой страницы, когда пользователь нажимает ссылку на странице и использует состояние истории HTML для изменения названия, без проблем. Наверху есть «загрузочная панель», поэтому пользователь знает, что что-то происходит.Комбинация pAjax с активами loading

То, что я хотел бы достичь, - это заменить страницу после загрузки всех активов из загруженной страницы ajax, теперь на .done() Я заменяю только возвращаемую строку html.

Сайт изображение тяжелый, поэтому я вынужден: а) при загрузке страницы с помощью AJAX (который довольно быстро) б) когда HTML заменяется, мне нужно, чтобы показать новый «прелоадер» на самом деле загрузить все активы

Я хотел бы избежать делать b) предмет.

Код:

$.ajax({ 
    url: "urltoload.html", 
    context: document.body 
}).done(function(data) { 
    var newDoc = document.open("text/html", "replace"); 
    newDoc.write(data); 
    newDoc.close(); 
});

Я вместо полной страницы (включая скрипты), как заряженная страница полна активы (большие изображения), я использую этот замечательный инструмент waitForImages для загрузки всех активов, прежде чем на самом деле показывает страница.

Итак, сначала загружаю страницу с помощью ajax, затем, когда страница заменяется, я загружаю изображения, чтобы показать страницу. Я хотел бы объединить его с одной загрузкой.

источник

2016-02-10 Nefco

Пожалуйста, вашего кода в качестве сниппеты. –

Добавлена небольшая стрижка и более подробная информация. – Nefco

Добавьте это к своей странице index.html в теге тела.

<body onload="loadcontent()">

И это Js части (Заменить «YourContentFileUrl.html» в коде ниже с файлом URL, чтобы быть извлечен с помощью запроса Ajax):

function loadcontent() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.open(); 
    document.write(xhttp.responseText); 
    document.close(); 
    } 
    }; 
    xhttp.open("GET", "YourContentFileUrl.html", true); 
    xhttp.send(); 
}

источник

2016-02-10 11:08:01

Комбинация pAjax с активами loading

ответ

Смежные вопросы