Maybe it's a stupid question but I don't understand why the image is downloaded two times.
As you can see in the screenshot I'm trying to download an image called "vigna.20.min.jpg", but it is called two times! One call with type "xhr" and the other with type "jpeg".
As proof of that, the page size shows 3.6MB transferred. Can someone explain me why?
I'm using the Photo Sphere Library. If you go on the home page of this library you can see that the same thing happens there(they have a 360 photo example).
Moreover if someone has some suggestion on awesome 360 photo libraries please tell me!
This is the code example I'm following:
<!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>
Thanks!!!
As you can see, the call to those downloads are initiated by two different scripts.
Photo Sphere initiates the xhr download in photo-shpere-viewer.min.js to get some useful values, and then calls three.min.js which downloads the actual image that you see.