Javascript 当ar.js在脚本中使用52个NFT标记时，我在chrome上出错
我想在脚本中使用52个NFT标记（一副牌）。 我使用ajax加载json数据，使用javascript创建52个标签插入（下图），虽然成功，但当我在chrome上使用它时，它有很大的延迟，有时会出现get错误“啊，快照！“页面崩溃”。 我不知道怎么修，请帮帮我~~ javascript代码Javascript 当ar.js在脚本中使用52个NFT标记时，我在chrome上出错,javascript,html,ar.js,Javascript,Html,Ar.js,我想在脚本中使用52个NFT标记（一副牌）。 我使用ajax加载json数据，使用javascript创建52个标签插入（下图），虽然成功，但当我在chrome上使用它时，它有很大的延迟，有时会出现get错误“啊，快照！“页面崩溃”。 我不知道怎么修，请帮帮我~~ javascript代码 var image = document.getElementById('scannerimg'); $.ajax({ type:"GET", url:"
var image = document.getElementById('scannerimg');
$.ajax({
type:"GET",
url:"nft.json",
dataType: "json",
error: function (xhr) { alert("載入失敗!!請重新整理");},
success: function(data){
$.each(data, function(index, element){
var current_nft=document.createElement("a-nft");
current_nft.setAttribute('type', 'nft');
current_nft.setAttribute('url', element.img);
current_nft.setAttribute('smooth', 'true');
current_nft.setAttribute('smoothCount', '10');
current_nft.setAttribute('smoothTolerance', '.01');
current_nft.setAttribute('smoothThreshold', '5');
var current_text=document.createElement("a-text");
current_text.setAttribute('position', '0 0 -2');
current_text.setAttribute('rotation', '0 90 -90');
current_text.setAttribute('width', '10');
current_text.setAttribute('color', 'purple');
current_text.setAttribute('value', element.value);
$(current_nft).append(current_text);
$('#scene').append(current_nft);
current_nft.addEventListener("markerFound", (e) => {
image.style.filter="grayscale(0%)";
var msg = new SpeechSynthesisUtterance(element.value);
msg.lang= 'zh-TW';
window.speechSynthesis.speak(msg);
});
current_nft.addEventListener("markerLost", (e) => {
image.style.filter="grayscale(100%)";
});
});
}
});
.arjs加载器{
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
背景色：rgba（0,0,0,0.8）；
z指数：9999；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.arjs装载机分区{
文本对齐：居中；
字号：1.25em；
颜色：白色；
}
.扫描仪{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
img{
高度：50vh；
滤镜：灰度（100%）；
}
文件
正在加载，请稍候。。。
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
.scanner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img{
height: 50vh;
filter: grayscale(100%);
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Document</title>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<div class="scanner">
<img src="image/face.png" alt="" srcset="" id="scannerimg">
</div>
<a-scene
id="scene"
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<a-entity camera></a-entity>
</a-scene>
<script src="imagetracking.js"></script>
</body>
</html>