时间戳

首页 > 解决方案 > 在html中请求图片后，three.js再次请求同一张图片

javascript - 在html中请求图片后，three.js再次请求同一张图片

问题描述

这是代码

let texture = new THREE.TextureLoader().load("http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg")
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<img class='preLoad' src = 'http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg' style='display:none'>

图像

我希望浏览器在解析html时加载图片，而不是等待three.js初始化后再请求图片。

例如

// this image only request once,other img tags use it directly
<img src='http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg'>
<img src='http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg'>
<img src='http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg'>

但是为什么three.js请求它而不是直接使用它

这是浪费时间。
我该如何解决？
谢谢！</p>

标签： javascripthtmlperformancethree.jsrequest

解决方案

你可以试试这个

使用这样的 id创建img元素，

<img src="YOUR_URL" id="preloaded-image">

加载页面后，您可以通过以下方式获取此元素，

var picture = document.getElementById( 'preloaded-image' );

现在使用这个图像创建一个 three.js 纹理，

var texture = new THREE.Texture();
texture.image = picture;
texture.needsUpdate = true;

现在你可以使用这个纹理了。我希望它不会再次请求文件（我没有测试过）

推荐阅读