Chiamare una funzione JavaScript preload()?

Question

Se controllo un pulsante di opzione per la prima volta, mi sento congelare brevemente. Controllandoli una seconda volta, tutto scorre veloce. Penso perché sono ora nella cache del browser. Qualche possibilità di un precarico qui?

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

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

Avviso: THREE.ImageUtils.loadTexture viene deprecato. Utilizzare invece THREE.TextureLoader().

Answer 2

si sta cercando di compensare il fatto che loadTexture() è asincrona, con l'aggiunta di una funzione setTimeout() nel codice. Ma cosa succede se il caricamento richiede 501ms? non vedrai nulla È necessario riprogettare il codice in modo che le trame siano disponibili quando sono necessarie. Utilizzare un gestore TextureLoader().

EDIT:

Caricamento di immagini e modelli sono attività non bloccante asincrone. La classe THREE.LoadingManager() gestisce il caricamento asincrono tenendo traccia dei dati caricati e in sospeso. Un'istanza di THREE.LoadingManager() può gestire più caricatori asincroni chiamando onProgress() per ogni elemento caricato e il metodo onLoad() dopo aver completato il caricamento in sospeso.

Documentazione presso: http://threejs.org/docs/#Reference/Loaders/LoadingManager

R73

Answer 3

Ecco un modo per risolvere il problema, Questo è il modo in cui utilizzo per il precaricamento delle immagini. Io uso per mostrare un caricatore durante il precaricamento delle immagini. È necessario aggiungere un div preloader nel corpo con un css e utilizzare il seguente script jQuery per implementare il 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