Question

也许这是一个愚蠢的问题，但我不明白为什么图像会被下载两次。

正如您在屏幕截图中看到的，我正在尝试下载名为“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>&copy; 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>

谢谢！

Answer 1

如您所见，对这些下载的调用由两个不同的脚本启动。

Photo Sphere在photo-shpere-viewer.min.js中启动xhr下载以获取一些有用的值，然后调用three.min.js下载您看到的实际图像。

Answer 2

只需添加此配置

usexmpdata: false

仅此而已

了解图像下载两次的原因

2 个答案: