javascript - 如何在仍在加载时更改原始 HTML

Question

我需要使用一些由 JS 计算的数据(例如:窗口大小)作为某些 HTML 元素的 css 属性。为了避免因为布局变化导致窗口闪烁，我用不起document.onready。我实际上需要在将 DOM 元素添加到 DOM 树时触发 JS 函数。

我试过 DOMNodeInserted事件，但它似乎仅针对使用 JavaScript 在加载 HTML 代码后添加的元素触发。

我需要的是更改页面原始 HTML 源代码中显示的标记。所以现在我只是在必须更改的标记的 HTML 代码之后内联 JavaScript，但是有没有一种方法可以在不在每个这样的标记之后内联 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'
    });
}

Answer 1

您可以使用脚本编写样式表，并在主体渲染之前将其添加到头部的新样式元素中。

或者您可以在样式表中使用媒体查询，并为不同的窗口或设备尺寸应用您喜欢的样式。