调用 JavaScript preload() 函数？

Posted 2023-02-27

【中文标题】调用 JavaScript preload() 函数？

【英文标题】：Call a JavaScript preload() function?

【发布时间】：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;
    

);

【参考方案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) 也可以异步下载图像。也许你可以早点运行这个初始化。