调用 JavaScript preload() 函数？答案

【问题标题】：Call a JavaScript preload() function?调用 JavaScript preload() 函数？
【发布时间】：2016-03-30 11:07:20
【问题描述】：

如果我第一次选中单选按钮，我会感到短暂的冻结。第二次检查它们，一切都运行得非常顺利。我想是因为它们现在在浏览器缓存中。这里有预加载的机会吗？

var insideMap1 = THREE.ImageUtils.loadTexture( 'insideMap1.jpg' );
var insideMap2 = THREE.ImageUtils.loadTexture( 'insideMap2.jpg' );
var insideMap3 = THREE.ImageUtils.loadTexture( 'insideMap3.jpg' );

$("input[name='opt1']").change(function() {

    if ($("#radio1").is(":checked")) {
        material[ "inside" ].map = insideMap1;
    }

    if ($("#radio2").is(":checked")) {
       material[ "inside" ].map = insideMap2;
    }

    if ($("#radio3").is(":checked")) {
       material[ "inside" ].map = insideMap3;
    }

});

【问题讨论】：

标签： javascript jquery three.js

【解决方案1】：

这是解决您的问题的一种方法，这就是我用来预加载图像的方法。我用来在预加载图像时显示加载器。您需要在 body 中添加一个带有一些 css 的预加载器 div，并使用以下 jQuery 脚本来实现预加载器。

html:

<div class="preloader">Loading...</div>

css:

.preloader{
    width: 100%;
    z-index: 999999;
    display: inline-block;
    background-color: #f2f2f2;
    text-align: center;
    font-size: 40px;
}

javascript：

$(function(){
    $('.preloader').css('height',window.innerHeight);
    $('.preloader').css('padding-top',(window.innerHeight/2)+"px");

    preload_images(
        [ /* image list to be preloaded */
         'http://weknowyourdreams.com/images/sunset/sunset-02.jpg',
         'http://cdn.bigbangfish.com/beautiful/beautiful-sunset/beautiful-sunset-12.jpg',
         'http://cdn.bigbangfish.com/beautiful/beautiful-sunset/beautiful-sunset-6.jpg'
        ], 
        function() { /* callback */
            $(".preloader").slideUp("slow");
        }
   );
});

function preload_images(a, callback) {
    var l = a.length;
    0 === l && callback();
    var i = 0;
    $(a).each(function() {
        $("<img>").attr("src", this).load(function() {
            i++, i === l && callback();
        })
    });
    return false;
}

JSFIDDLE

【讨论】：

【解决方案2】：

您试图通过在代码中添加setTimeout() 函数来抵消loadTexture() 是异步的事实。但是如果加载需要 501 毫秒呢？你不会看到任何东西。您需要重新设计代码，以便纹理在需要时可用。使用TextureLoader() 经理。

编辑：

图像和模型的加载是异步非阻塞活动。 THREE.LoadingManager() 类通过跟踪已加载和待处理的数据来管理异步加载。 THREE.LoadingManager() 的实例可以管理多个异步加载器，方法是为每个加载的项目调用onProgress()，并在所有挂起的加载完成后调用onLoad() 方法。

文档地址：http://threejs.org/docs/#Reference/Loaders/LoadingManager

r73

【讨论】：

【解决方案3】：

使用三缓存：

<script>
    $(document).ready(function() {

        THREE.Cache.enabled = true;

        var url = '/img/DSC03537.JPG';
        var newImg = document.createElement('img');
        newImg.src = url;
        THREE.Cache.add(url, newImg);

        // main program part
        var insideMap2 = THREE.ImageUtils.loadTexture(url);

        $("#testBox").change(function () {
                $("#tstImg").map = insideMap2;
        });
    });
</script>

注意：THREE.ImageUtils.loadTexture 已被弃用。请改用 THREE.TextureLoader()。

【讨论】：

谢谢。你有预加载多张图片的例子吗？
@AlexanderHein。我盯着三个来源。如果您制作一个简单的真实示例（带有 JS + 图像的 HTML），我可以为您提供帮助。但是 THREE.ImageUtils.loadTexture(url) 也可以异步下载图像。也许你可以早点运行这个初始化。