Определить страницу, загруженную с помощью Javascript - PullRequest
Новая
       4

Определить страницу, загруженную с помощью Javascript

2 голосов
/ 24 марта 2011

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

Я хотел бы найти способ сделать это, предпочтительно используя библиотеку jquery. Есть идеи?

Ответы [ 7 ]

6 голосов
/ 24 марта 2011

Если предположить, что все изображения, которые вы хотите загрузить до удаления наложения, имеют класс .theImagesToLoad: 

// count the number of images
var imageCount = $(".theImagesToLoad").length;

// init a load counter
var loadCounter = 0;
$(".theImagesToLoad").load(function() {

    // an image has loaded, increment load counter
    loadCounter++;

    // remove overlay once all images have loaded
    if(loadCounter == imageCount) {
        removeOverlay();
    }
}).each(function() {

    // make sure the `.load` event triggers
    // even when the image(s) have been cached
    // to ensure that the overlay is removed
    if(this.complete) $(this).trigger("load");
});

См: http://api.jquery.com/load-event/

3 голосов
/ 24 марта 2011

Вы можете использовать событие window.onload, оно запускается, когда все изображения загружены: 

window.onload = function() {
  $('#maskoverlay').remove();
}

Смотрите здесь: https://developer.mozilla.org/en/DOM/window.onload

2 голосов
/ 24 марта 2011

Событие jQuery ready запускается, когда DOM готов, а не когда загружены все изображения.Вы можете использовать window.onload, как предлагалось ранее, или, если вы хотите использовать jQuery, вы можете использовать событие загрузки следующим образом: 

$(window).load(function () {
  // run code
});
0 голосов
/ 24 марта 2011

Что-то вроде? 

$(function() {
    var img = [];
    var imgarr = ["image1.png","image2.png", ....];
    var imgcount = 0;

    var loadTimer;
    loadTimer = setInterval(function() {
        if(imgcount == imgarr.length){
           clearInterval(loadTimer);

           // ALL IMAGES ARE DONE LOADING HERE
           //   use : $(img) to have a JQuery object of the image elements
        }
    },100);

    $(imageContainer).hide();
    for(var i=0;i<imgarr.length;i++){
        img[i] = new Image();
        img.style.display = 'none';
        $(img[i]).appendTo(imageContainer);
        img[i].src = imgarr[i];
        img[i].onload = function() { imgcount++; }
    }
});
0 голосов
/ 24 марта 2011

я думаю, что вы можете использовать событие onload для тега <body> и прикрепить к функции

или вы можете использовать jquery 

$(document).ready(function(){
});
0 голосов
/ 24 марта 2011

или вы можете использовать: 

$(document).ready(function(){
    //your code
}

Редактировать

Извините, возможно, неправильно вас понял, этот плагин может вам помочь:

https://gist.github.com/268257

0 голосов
/ 24 марта 2011

Для документов, готовых к использованию: 

$(function(){

   // Your code

});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...