Как изменить оригинальный HTML, пока он еще загружается - PullRequest
1 голос
/ 26 января 2012

Мне нужно использовать некоторые данные, рассчитанные с помощью JS (например: размер окна), в качестве свойства css некоторого элемента HTML.Чтобы избежать мерцания окна из-за изменений макета, я не могу позволить себе использовать document.onready.На самом деле мне нужно вызвать функцию JS, когда элемент DOM добавляется в дерево DOM.

Я пробовал с событием DOMNodeInserted , но похоже, что оно сработало только для элементов, которые добавляются после загрузки HTML-кода с помощью JavaScript.

Что янеобходимо изменить тег, представленный в исходном HTML-коде страницы.Поэтому сейчас я просто включаю JavaScript сразу после HTML-кода тега, который должен быть изменен, но есть ли способ сделать это, не вставляя JS после каждого такого тега.Что-то вроде DOMNodeInserted, но срабатывает во время визуализации исходного HTML.Или как еще я могу это сделать - иметь зависимый от JS макет, который не перемещается после загрузки (он правильно сгенерирован перед тем, как показывать его пользователю) и при этом имеет HTML-код на странице (например, не генерирует страницу полностью из JavaScript)?

ОБНОВЛЕНИЕ вот JavaScript, который используется для изменения размера изображения.Он учитывает ширину и высоту, в то время как widht: 100% или height: 100% работает, если ширина / высота окна не меньше, чем само изображение.

function resizeImg() {
    var imgwidth = bgImg.width();
    var imgheight = bgImg.height();

    var winwidth = $(window).width();
    var winheight = $(window).height();

    var imgratio = imgwidth / imgheight;

    imgwidth = winwidth;
    imgheight = winwidth / imgratio;


    if (imgheight < winheight) { 
        imgheight = winheight;
        imgwidth = imgheight * imgratio;
    }

    $('.cover-image').css({
        width: winwidth+'px',
        height: winheight+'px'
    });
}

1 Ответ

2 голосов
/ 26 января 2012

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

Или вы можете использовать медиазапросы в таблице стилей и применять стили, которые вы предпочитаете, для разных размеров окна или устройства.

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