Question

我在HTML中将以下部分视图作为exterior.html文件：

<div class="layout-exterior">

      <div id="carExterior" class="cars-exterior-1"></div>
      <div class="icon-360-black"></div>
      <div class="swipe-to-experience-black"></div>

</div>

On＆＃39; touchmove＆＃39;事件它改变了与当前位置相关的背景，但这不是问题。

问题是我只能在我公司使用Vanilla Javascript（没有jQuery，所以没有内置的promises），当我将它包含在主index.html模板的主容器中时，索引中的预加载脚本.html失去了对脚本的绑定，导致图像没有被预加载，并且它们会闪烁＆＃39;在第一次加载。尝试把它们放在底部和头部，同样的结果。

我利用简单的路由来检查hashchange上的哈希，然后加载例如exteriorView函数，然后通过AJAX get请求获取模板内容。

现在，我正在考虑以CSS方式预加载它们;用它们精灵然后将它们重新编入，但不允许在我工作的地方。

在部分模板中包含预加载脚本仍然不起作用（将图像放在新Image（）的.src中）。使用以下脚本：

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "http://domain.tld/gallery/image-001.jpg",
                "http://domain.tld/gallery/image-002.jpg",
                "http://domain.tld/gallery/image-003.jpg"
            )
        //--><!]]>
    </script>
</div>

有人知道任何解决方案吗？

香草JavaScript路由和图像预加载

0 个答案: