问题描述
我一直试图在另一个 JavaScript(例如 script.js)之前通过 JavaScript 将图像(例如 img1.jpg)插入到 DOM 中。工作流程如下所示:
- 通过创建 new Image() 并设置 src 字段来插入 img1.jpg。随后通过 document.insertBefore() 将图像节点添加到 DOM 中。
- 通过 XHR 获取 script.js 并通过对返回的数据调用 eval() 来运行它。
问题是,即使我在脚本之前创建了图像并设置了 src 字段,在发送图像的网络请求之前以及当我打印出资源计时,我看到script.js的requestStart在img1.jpg之前。有什么方法可以让我在发送对 JavaScript(或类似的高优先级资源,如 CSS)的网络请求之前获取图像(或与此相关的任何资源)?
如果问题不清楚,我们深表歉意。我刚刚加入了网站。
const fetchObj = function( url ) {
console.log(`fetching ${url}`);
result = {};
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
result = this.response;
}
};
xhr.open("GET",url,false);
xhr.send();
return result;
}
const htmltonodes = function( markup ) {
var template = document.createElement("template");
template.innerHTML = markup;
return template.content.childNodes;
}
const processAndInsertElement = function( value,index,array ) {
var type,content;
[type,content] = value
if ( type == "htmlchunk" ) {
var nodes = htmltonodes(content);
for (var i = 0; i < nodes.length; i++) {
document.body.appendChild(nodes[i]);
}
} else if ( type == "image" ) {
document.body.innerHTML += content
} else if ( type == "javascript" ) {
var script = fetchObj(content);
eval(script);
}
}
schedule = [
["image",`<img src="./img/cat1.jpeg" width="500" height="auto" alt="a cute cat"></img>`],["javascript","./js/simple.js"]
];
schedule.forEach(processAndInsertElement);
总而言之,我在脚本之前添加图像。我希望添加到 html 中的图像元素会导致 cat1.jpeg 的网络提取立即完成,之后 fetchObj 将同步提取脚本并对其进行评估。但是,在 devtools 中,我看到脚本首先被加载(我看到它在性能选项卡上具有高优先级)并且图像在之后被获取并且具有低优先级。
我希望这能澄清问题并有助于在本地重现它。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)