Определить, закончилась ли загрузка страницы

jquery

257678 просмотра

10 ответа

Есть ли способ определить, когда страница закончила загрузку, т.е. весь ее контент, javascript и ресурсы, такие как css и изображения?

так как:

if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}

а также дополнительно, если страница загружалась более 1 минуты, сделайте что-нибудь еще, например:

if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}

Я видел такие сайты, как Apple MobileMe, делающие подобные проверки, но не смог понять это в своих огромных библиотеках кода.

Кто-нибудь может помочь?

Спасибо

РЕДАКТИРОВАТЬ: Это по сути то, что я хочу сделать:

// hide content
$("#hide").hide();

// hide loading
$("#loading").hide();

// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);

jQuery(window).load(function() {
  $("#hide").fadeIn();

  $("#loading").fadeOut(function() {
    $(this).remove();
    clearInterval(loadingAnim);
  });

  setTimeout(function() {
    $("#error").fadeIn();
  }, 60000);
});
Автор: Cameron Источник Размещён: 12.11.2019 09:05

Ответы (10)


116 плюса

Решение
jQuery(window).load(function () {
    alert('page is loaded');

    setTimeout(function () {
        alert('page is loaded and 1 minute has passed');   
    }, 60000);

});

Или http://jsfiddle.net/tangibleJ/fLLrs/1/

Смотрите также http://api.jquery.com/load-event/ для объяснения jQuery (окна) .load.

Обновить

Подробное объяснение того, как происходит загрузка javascript и два события DOMContentLoaded и OnLoad, можно найти на этой странице .

DOMContentLoaded : когда DOM готов к манипулированию. Способ захвата этого события с помощью jQuery jQuery(document).ready(function () {});.

OnLoad : когда DOM готов и все ресурсы - включая изображения, iframe, шрифты и т. Д. - загружены и класс вращающегося колеса / часа исчезает. Способ захвата этого события в jQuery - вышеупомянутый jQuery(window).load.

Автор: TJ. Размещён: 16.08.2011 07:23

56 плюса

Есть два способа сделать это в JQuery в зависимости от того, что вы ищете ..

используя JQuery вы можете сделать

  • // это будет ждать загрузки текстовых ресурсов перед вызовом this (dom .. css .. js)

    $(document).ready(function(){...});
    
  • // это будет ждать окончания загрузки всех изображений и текстовых ресурсов перед выполнением

    $(window).load(function(){...});
    
Автор: samccone Размещён: 16.08.2011 07:20

12 плюса

Это называется нагрузкой. DOM ready был фактически создан по той причине, что onload ждала изображения. (Ответ, взятый у Матчу на схожий вопрос некоторое время назад.)

window.onload = function () { alert("It's loaded!") }

onload ожидает все ресурсы, которые являются частью документа.

Ссылка на вопрос, где он все это объяснил:

Нажмите меня, вы знаете, что хотите!

Автор: Nemanja Размещён: 16.08.2011 07:22

11 плюса

Я думаю, что самый простой способ был бы

var items = $('img, style, ...'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

РЕДАКТИРОВАТЬ, чтобы быть немного сумасшедшим:

var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' + 
    'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' + 
    'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' +
    'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' +
    'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' +
    'label, legend, li, link, listing, map, marquee, media, menu, meta, ' +
    'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' +
    'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' + 
    'source, span, strike, strong, style, sub, sup, table, tbody, td, ' + 
    'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' + 
    'window, xmp'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});
Автор: qwertymk Размещён: 16.08.2011 07:21

7 плюса

Другой вариант, вы можете проверить документ. ReadyState, как,

var chkReadyState = setInterval(function() {
    if (document.readyState == "complete") {
        // clear the interval
        clearInterval(chkReadyState);
        // finally your page is loaded.
    }
}, 100);

Из документации ReadyState Page сводка полного состояния

Возвращает «загрузку» во время загрузки документа, «интерактивную» после завершения анализа, но по-прежнему загружая подресурсы, и «завершенную» после загрузки.

Автор: Rohan Kumar Размещён: 24.04.2015 05:44

2 плюса

Один из вариантов - сделать страницу пустой, содержащей небольшое количество javascript. Используйте сценарий для вызова AJAX, чтобы получить фактическое содержимое страницы, и используйте функцию успеха, чтобы записать результат поверх текущего документа. В функции тайм-аута вы можете «сделать что-то еще удивительное»

Примерный псевдокод:

$(document).ready(function(){
    $.ajax
      url of actual page
      success:do something amazing
      timeout: do something else
});
Автор: yoozer8 Размещён: 16.08.2011 07:16

2 плюса

Это то, что вы имели в виду?

$("document").ready( function() {
    // do your stuff
}
Автор: John Smith Размещён: 16.08.2011 07:17

2 плюса

var pageLoaded=0;

$(document).ready(function(){
   pageLoaded=1;
});

Использование jquery: https://learn.jquery.com/using-jquery-core/document-ready/

Автор: Danial Размещён: 03.06.2016 12:57

2 плюса

Без jquery или чего-то в этом роде, почему бы и нет?

var loaded=0;
var loaded1min=0;
document.addEventListener("DOMContentLoaded", function(event) {
   loaded=1;
    setTimeout(function () {
      loaded1min=1;
    }, 60000);
});
Автор: Cth103 Размещён: 22.06.2016 10:28

1 плюс

К сведению людей, которые спрашивали в комментариях, это то, что я на самом деле использовал в проектах:

function onLoad(loading, loaded) {
    if(document.readyState === 'complete'){
        return loaded();
    }
    loading();
    if (window.addEventListener) {
        window.addEventListener('load', loaded, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', loaded);
    }
};

onLoad(function(){
   console.log('I am waiting for the page to be loaded');
},
function(){
    console.log('The page is loaded');
});
Автор: Cameron Размещён: 10.07.2017 09:31
Вопросы из категории :
32x32