Вызвать функцию предварительной загрузки JavaScript()?

Если я впервые проверил переключатель, я получу небольшое замораживание. Проверяя их во второй раз, все работает супер гладко. Я думаю, потому что они теперь находятся в кеше браузера. Есть ли вероятность предварительной загрузки?

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

Используйте 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().

Ответ 2

Вы пытаетесь компенсировать тот факт, что loadTexture() является асинхронным, добавив в свой код функцию setTimeout(). Но что, если загрузка занимает 501 мс? вы ничего не увидите. Вам необходимо переконфигурировать ваш код, чтобы текстуры были доступны, когда они необходимы. Используйте диспетчер TextureLoader().

EDIT:

Загрузка изображений и моделей - это асинхронные неблокирующие операции. THREE.LoadingManager() класс управляет асинхронной загрузкой, отслеживая загруженные и ожидающие данные данные. Экземпляр THREE.LoadingManager() может управлять несколькими асинхронными загрузчиками, вызывая onProgress() для каждого загруженного элемента и метод onLoad() после завершения всей ожидающей загрузки.

Документация по адресу: http://threejs.org/docs/#Reference/Loaders/LoadingManager

R73

Ответ 3

Вот способ решить вашу проблему. Вот как я использую предварительную загрузку изображений. Я использую для показа загрузчика при предварительной загрузке изображений. Вам нужно добавить div preloader в тело с некоторым css и использовать следующий jQuery script для реализации preloader.

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