CODEWITHSUNDEEP
javascriptjquerythree.js
Alexander Hein
Alexander Hein

Reputation: 990

Call a JavaScript preload() function?

If I check a radio button for the first time I'm getting a short freezing. Checking them a second time everything runs super smooth. I think because they are now in the browser-cache. Any chance of a preload here?

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

});

Upvotes: 10

Views: 5714

Answers (3)

Scarecrow
Scarecrow

Reputation: 4137

Here is a way to solve your problem, This is how I use to preload images. I use to show a loader while preloading images. You need to add a preloader div in body with some css, and use following jQuery script to implement the 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

Upvotes: 1

gaitat
gaitat

Reputation: 12642

You are trying to offset the fact that loadTexture() is asynchronous, by adding a setTimeout() function in your code. But what if the loading takes 501ms? you will not see anything. You need to redesign your code so that the textures are available when they are needed. Use a TextureLoader() manager.

EDIT:

Loading of images and models are asynchronous nonblocking activities. THREE.LoadingManager() class manages asynchronous loading by keeping track of loaded and pending data. An instance of THREE.LoadingManager() can manage multiple asynchronous loaders by calling onProgress() for each item loaded and the onLoad() method after all pending loading is complete.

Documentation at: http://threejs.org/docs/#Reference/Loaders/LoadingManager

r73

Upvotes: 2

Pavel Samoylenko
Pavel Samoylenko

Reputation: 531

Use 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>

Notice: THREE.ImageUtils.loadTexture is being deprecated. Use THREE.TextureLoader() instead.

Upvotes: 5

Related Questions