文章/答案/技术大牛

发布

社区首页 >问答首页 >了解镜像下载两次的原因

问了解镜像下载两次的原因
EN

Stack Overflow用户

提问于 2017-06-30 04:16:58

回答 2查看 163关注 0票数 1

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

正如你在截图中看到的，我试图下载一个叫做"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>

谢谢！

xmlhttprequest

httprequest

httpresponse

photosphere

javascript

回答 2

Stack Overflow用户

发布于 2018-11-29 17:24:16

只需添加此配置

usexmpdata: false

就这样

票数 1

Stack Overflow用户

发布于 2017-06-30 04:41:10

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44834244

复制

相似问题

问了解镜像下载两次的原因
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解镜像下载两次的原因EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解镜像下载两次的原因
EN