也许这是一个愚蠢的问题，但是我不明白为什么该图像被下载了两次。
正如您在屏幕截图中所看到的，我正在尝试下载一个名为“ vigna.20.min.jpg”的图像，但是它被调用了两次！
一个类型为“ xhr”的呼叫，另一个类型为“ jpeg”的呼叫。
作为证明，页面大小显示已传输3.6MB。
有人可以解释我为什么吗？
我正在使用Photo Sphere Library。
如果您转到该库的主页，您会发现那里也发生了同样的事情（有360张照片示例）。
此外，如果有人对很棒的360照片库有任何建议，请告诉我！
这是我下面的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Photo-Sphere-Viewer/dist/photo-sphere-viewer.css">
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#photosphere {
width: 100%;
height: 100%;
}
.psv-button.custom-button {
font-size: 22px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="photosphere"></div>
<script src="three/build/three.min.js"></script>
<script src="d.js/lib/D.min.js"></script>
<script src="uevent/uevent.min.js"></script>
<script src="dot/doT.min.js"></script>
<script src="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.js"></script>
<script src="three/examples/js/renderers/CanvasRenderer.js"></script>
<script src="three/examples/js/renderers/Projector.js"></script>
<script src="three/examples/js/controls/DeviceOrientationControls.js"></script>
<!-- text used for the marker description -->
<script type="text/template" id="pin-content">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a
href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet
congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus
est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</script>
<!-- pattern used for the polygon marker -->
<svg id="patterns">
<defs>
<pattern id="dots" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" style="stroke: none; fill: rgba(255,0,0,0.4)"/>
</pattern>
<pattern id="points" x="10" y="10" width="15" height="15" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="0.8" style="stroke: none; fill: red"/>
</pattern>
</defs>
</svg>
<script>
var panos = [
{
url: 'vigna.20.min.jpg',
desc: 'Bryce Canyon National Park <b>© Jess Beauchemin</b>',
target: {
longitude: 3.715,
latitude: 0.574
}
}
];
var PSV = new PhotoSphereViewer({
container: 'photosphere',
panorama: panos[0].url,
caption: panos[0].desc,
loading_img: 'photosphere-logo.gif',
longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8],
latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4],
anim_speed: '-2rpm',
default_fov: 50,
fisheye: true,
move_speed: 1.1,
time_anim: false,
gyroscope: true,
//webgl: true,
navbar: [
'autorotate', 'zoom', 'download', 'markers',
'spacer-1',
{
title: 'Change image',
className: 'custom-button',
content: '↻',
onClick: (function() {
var i = 0;
return function() {
i = 1 - i;
PSV.clearMarkers();
PSV.setPanorama(panos[i].url, panos[i].target, true)
.then(function() {
PSV.setCaption(panos[i].desc);
});
}
}())
},
{
id: 'disabled',
title: 'This button is disabled',
content: '❌',
enabled: false
},
'caption',
'gyroscope',
'fullscreen'
]
});
</script>
</body>
</html>
谢谢！！！
最佳答案
只需添加此配置
usexmpdata: false
就这样
关于javascript - 了解为什么两次下载图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44834244/