एक जावास्क्रिप्ट प्रीलोड() फ़ंक्शन कॉल करें?

Question

अगर मैं पहली बार रेडियो बटन की जांच करता हूं तो मुझे एक छोटी ठंड लग रही है। उन्हें दूसरी बार जांचना सब कुछ सुपर चिकनी चलाता है। मुझे लगता है क्योंकि वे अब ब्राउज़र-कैश में हैं। यहां एक प्रीलोड का कोई मौका?

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

उपयोग 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 पदावनत किया जा रहा है। इसके बजाय तीन.TextureLoader() का उपयोग करें।

Answer 2

आप तथ्य यह है कि loadTexture(), अतुल्यकालिक है अपने कोड में एक setTimeout() समारोह जोड़कर ऑफसेट करने के लिए कोशिश कर रहे हैं। लेकिन क्या होगा अगर लोडिंग 501 एमएमएस लेती है? आप कुछ भी नहीं देखेंगे। आपको अपने कोड को फिर से डिजाइन करने की आवश्यकता है ताकि जब आवश्यक हो तो बनावट उपलब्ध हों। TextureLoader() प्रबंधक का उपयोग करें।

संपादित करें:

छवियों और मॉडलों के लोड हो रहा है अतुल्यकालिक nonblocking गतिविधियों रहे हैं। THREE.LoadingManager() वर्ग लोड और लंबित डेटा का ट्रैक रखकर एसिंक्रोनस लोडिंग का प्रबंधन करता है। THREE.LoadingManager() का एक उदाहरण प्रत्येक लंबित लोडिंग पूर्ण होने के बाद को कॉल करके पर कॉल करके एकाधिक एसिंक्रोनस लोडर प्रबंधित कर सकता है और onLoad() विधि पूर्ण लंबित हो जाने के बाद।

प्रलेखन पर: http://threejs.org/docs/#Reference/Loaders/LoadingManager

r73

Answer 3

यहां आपकी समस्या का समाधान करने का एक तरीका है, इस प्रकार मैं छवियों को प्रीलोड करने के लिए उपयोग करता हूं। मैं छवियों को preloading करते समय एक लोडर दिखाने के लिए उपयोग करते हैं। आपको कुछ सीएसएस के साथ शरीर में प्रीलोडर div जोड़ने की आवश्यकता है, और प्रीलोडर को लागू करने के लिए निम्न jQuery स्क्रिप्ट का उपयोग करें।

एचटीएमएल:

<div class="preloader">Loading...</div> 

सीएसएस:

.preloader{ 
    width: 100%; 
    z-index: 999999; 
    display: inline-block; 
    background-color: #f2f2f2; 
    text-align: center; 
    font-size: 40px; 
} 

जावास्क्रिप्ट:

$(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