Rufen Sie eine JavaScript-Funktion preload() auf?

Question

Wenn ich zum ersten Mal einen Radiobutton überprüfe, bekomme ich eine kurze Einfrierung. Wenn Sie sie ein zweites Mal überprüfen, läuft alles super glatt. Ich denke, weil sie jetzt im Browser-Cache sind. Irgendeine Chance auf eine Vorspannung hier? durch Hinzufügen einer setTimeout() Funktion in Ihrem Code

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

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

Hinweis: THREE.ImageUtils.loadTexture veraltet wird. Verwenden Sie stattdessen THREE.TextureLoader().

Answer 2

Sie versuchen die Tatsache, dass loadTexture() ist asynchron, zu kompensieren. Aber was, wenn das Laden 501ms dauert? Du wirst nichts sehen. Sie müssen Ihren Code neu gestalten, damit die Texturen verfügbar sind, wenn sie benötigt werden. Verwenden Sie einen TextureLoader() Manager.

EDIT:

Laden von Bildern und Modellen sind asynchron nonblocking Aktivitäten. THREE.LoadingManager() Klasse verwaltet das asynchrone Laden, indem geladene und ausstehende Daten verfolgt werden. Eine Instanz von THREE.LoadingManager() kann mehrere asynchrone Lader verwalten, indem sie für jedes geladene Element onProgress() aufruft und die Methode onLoad() aufruft, nachdem das gesamte ausstehende Laden abgeschlossen ist.

Dokumentation bei: http://threejs.org/docs/#Reference/Loaders/LoadingManager

R73

Answer 3

Hier ist ein Weg, um Ihr Problem zu lösen, So verwende ich Bilder zu laden. Ich benutze, um einen Lader anzuzeigen, während Bilder vorgeladen werden. Sie müssen ein Preloader-Div im Body mit einigen CSS hinzufügen und das folgende jQuery-Skript verwenden, um den Preloader zu implementieren.

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