Question

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

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;
    }

});

Answer 1

使用THREE.Cache：

<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（）。

Answer 2

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

修改

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

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

R73

Answer 3

这是一种解决问题的方法，这就是我用来预加载图像的方法。我用来在预加载图像时显示加载器。您需要在主体中添加一个预加载器div和一些css，并使用以下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

调用JavaScript preload（）函数？

3 个答案: