Call a JavaScript preload() function?

Question

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

Pavel Samoylenko · Accepted Answer · 2015-12-26 12:50:03Z

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.

Thank you. Do you have a example for preloading multiple images?
@AlexanderHein . I stared a sources of THREE. I can help you if you make one simple real example (HTML with JS + image). But THREE.ImageUtils.loadTexture(url) makes a asynchronous downloading image too. May be you just can run this initialization earlier.

gaitat · Accepted Answer · 2015-12-28 16:47:34Z

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

ipinak · Accepted Answer · 2016-01-02 11:39:30Z

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

Collectives™ on Stack Overflow

Call a JavaScript preload() function?

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related