Wywołanie funkcji wstępnego ładowania JavaScript()?

Jeśli sprawdzę przycisk radiowy po raz pierwszy, otrzymuję krótkie zamrożenie. Sprawdzanie ich po raz drugi wszystko przebiega bardzo gładko. Myślę, że są teraz w pamięci podręcznej przeglądarki. Masz tu szansę na wstępne ładowanie?Wywołanie funkcji wstępnego ładowania 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; 
    } 

});

Źródło

2015-12-23 Alexander Hein

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

Wskazówka: THREE.ImageUtils.loadTexture jest przestarzała. Zamiast tego użyj THREE.TextureLoader().

Źródło

2015-12-26 12:50:03

Dziękuję. Czy masz przykład wstępnego ładowania wielu obrazów? –

@AlexanderHein. Patrzyłem na źródła TRZY. Mogę ci pomóc, jeśli zrobisz jeden prosty przykład (HTML z obrazem JS +). Ale THREE.ImageUtils.loadTexture (url) również robi asynchroniczny obraz do pobrania. Być może po prostu uruchomisz tę inicjalizację wcześniej. –

Próbujesz zrównoważyć fakt, że loadTexture() jest asynchroniczna, dodając setTimeout() funkcji w kodzie. Ale co, jeśli ładowanie trwa 501ms? nic nie zobaczysz. Musisz przeprojektować swój kod, aby tekstury były dostępne, gdy są potrzebne. Użyj menedżera TextureLoader().

EDIT:

Ładowanie zdjęć i modeli są asynchroniczne działania nonblocking. Klasa THREE.LoadingManager() zarządza ładowaniem asynchronicznym, rejestrując załadowane i oczekujące dane. Instancja THREE.LoadingManager() może zarządzać wieloma ładowarkami asynchronicznymi, wywołując onProgress() dla każdego załadowanego towaru i metody onLoad() po zakończeniu wszystkich oczekujących operacji ładowania.

Dokumentacja w: http://threejs.org/docs/#Reference/Loaders/LoadingManager

R73

Źródło

2015-12-24 01:01:31 gaitat

Oto sposób na rozwiązanie problemu. W ten sposób wstępnie ładuję obrazy. Używam do pokazania programu ładującego podczas wstępnego ładowania obrazów. Musisz dodać element div preloadera do ciała z kilkoma css i użyć poniższego skryptu jQuery do implementacji preloadera.

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

Źródło

2016-01-01 18:08:47

Wywołanie funkcji wstępnego ładowania JavaScript()?

Odpowiedz

Powiązane problemy