html - JavaScript skal preloade billeder - Udvikleren.dk

Tags: html javascript

<< < 1 2 > >>

Bruger #13010 @ 07.12.11 01:47

Jeg har noget javascript kode hvor det var meningen at nogle billeder skal indlæses før javascript koden udføres.

Hvis jeg besøger siden med koden er det ikke altid det virker, så hvis jeg genindlæser siden så kan det være det virker.

Jeg går ud fra det er fordi billederne ikke er indlæs før javascript koden går igen og skal bruge billederne.

Kan i fortælle mig hvordan man gør preloader billeder rigtigt fordi det her virker vist ikke.

JScript kode

 <script type="text/javascript">
 
    canvas3 = document.getElementById("canvasanimation3");
    context3 = canvas3.getContext("2d");
 
    animation3x = 0;
    animation3y = 0;
    retning = 5;
 
    var scootera = new Image();
    var scooterb = new Image();
    var scooter  = new Image();
 
    scootera.src = "/htmlgrisen/billeder/billed0107.png";
    scooterb.src = "/htmlgrisen/billeder/billed0091.png";
    scooter.src  = scootera.src;
 
    function tegn_scooter(){
    
       if(animation3x < 0){
    
          scooter.src = scootera.src;
    
       }else if(animation3x >= (canvas3.width - scootera.width)){
    
          scooter.src = scooterb.src;
    
       }
    
       context3.clearRect(0,0,canvas3.width,canvas3.height);
       context3.drawImage(scooter, animation3x, animation3y);
       animation3x = animation3x + retning;
    
       if(animation3x < 0 || animation3x > 360 - 180 - 5){
    
          retning = -retning;
    
       }
    
    }
 
    scootera.onload = function(){
    scooterb.onload = function(){
 
       setInterval(tegn_scooter, 100);
 
    }
    }
 
 </script>

Indlæg senest redigeret d. 07.12.2011 01:47 af Bruger #13010

13 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 10 karma

Sorter efter stemmer Sorter efter dato

Bruger #5620 @ 07.12.11 11:33

1.500

Svaret her:
http://stackoverflow.com/questions/5933230/javascript-image-onload

hvor du tilføjer en tæller og når tælleren når antallet af billeder kald tegn_scooter.

Bruger #11328 @ 14.12.11 19:56

1.323

@scootergrisen, kompleks? Hvorfor ikke gøre det ordentligt og genbrugeligt. Ligesom så mange andre en-gangs-ting er JavaScript en-gangs-kode ikke det fedeste. Min kode er jo (udover det sidste hvor jeg laver et eksempel), bare et modul, du kan dumpe i et <script> tag og derefter bruge hvilket er JavaScript programmørers hellige gral

Du kalder aldrig window.onload, men du tildeler window.onload en funktion, som browseren sørger for at kalde.

Men ja, hvis du bruger et ordentligt eventsystem, som W3C's window.addEventListener, så kan du lytte til et event med ligeså mange listeners som du lyster.

Indlæg senest redigeret d. 14.12.2011 19:57 af Bruger #11328

Bruger #11328 @ 14.12.11 11:38

1.323

Jeg siger nej tak! At tjekke hver x antal ms kan vidst ikke kaldes videre optimalt!

Havde ikke rigtig noget andet at lave, så jeg lavede en lille OOP løsning. Håber du kan bruge den

HTML kode

 <!DOCTYPE html>
 <html>
   <head>
     <title>JS Image Preloader</title>
     <script>
       var Preloader = {
         images: {},
         callbacks: [],
         
         add: function(src) {
           if(typeof src !== 'string' || src.length === 0) return;
           
           var image = new Image();
           image.onload = function(e) {
             Preloader._load(e, src);
           }
           image.src = src;
           Preloader.images[src] = {img: image, loaded: image.complete};
         },
         
         ready: function(callback) {
           if(typeof callback !== 'function') return;
           
           Preloader.callbacks.push(callback);
           Preloader._check();
         },
         
         _check: function() {
           // Check if all images are loaded
           var cnt = 0, ldn = 0, i, length;
           for(i in Preloader.images) {
             if(Preloader.images[i].img instanceof Image) {
               cnt++;
               
               if(Preloader.images[i].loaded) {
                 ldn++;
               }
             }
           }
           
           // If they are, execute all callbacks
           if(cnt === ldn) {
             for(i = 0, length = Preloader.callbacks.length; i < length; i++) {
               Preloader.callbacks[i](Preloader.images);
             }
           }
         },
         
         _load: function(e, id) {
           e = e || window.event;
           Preloader.images[id].loaded = true;
           Preloader._check();
         }
       };
       
       Preloader.add('./img/Desert.jpg');
       Preloader.add('./img/Hydrangeas.jpg');
       Preloader.ready(function(images) {
         console.log("Ready: ", images);
       });
     </script>
   </head>
   <body>
   
   </body>
 </html>

Du kan også evt. indsætte dine billeder i <img> tags før window.onload, og så derefter lytte efter window.onload, som først vil blive "fired" når samtlige billeder er loadet.

Indlæg senest redigeret d. 14.12.2011 11:46 af Bruger #11328

Bruger #13010 @ 08.12.11 16:44

440

Regner med det er den her kode du mener.

JScript kode

 function FULL_IMAGE(fimage) {
     var loaded = false;
     function loadHandler() {
         if (loaded) {
             return;
         }
         loaded = true;
         /* your code */
     }
     var img = document.getElementById('FULL_SRC');
     img.onload = loadHandler;
     img.src = fimage;
     img.style.display = 'block';
     if (img.complete) {
         loadHandler();
     }
 }

Håber der er en lettere løsning en det.

Bruger #5789 @ 08.12.11 17:16

640

Med jQuery

HTML kode

 <div style="display: none" id="PreLoadImages">
 <img src="/htmlgrisen/billeder/billed0107.png"/>
 <img src="/htmlgrisen/billeder/billed0091.png"/>
 </div>

jQuery extension, kan ikke huske kilde :/

JScript kode

 jQuery.fn.onImagesLoaded = function(_cb) { 
   return this.each(function() {
  
     var $imgs = (this.tagName.toLowerCase()==='img')?$(this):$('img',this),
         _cont = this,
             i = 0,
     _done=function() {
       if( typeof _cb === 'function' ) _cb(_cont);
     };
  
     if( $imgs.length ) {
       $imgs.each(function() {
         var _img = this,
         _checki=function(e) {
           if((_img.complete) || (_img.readyState=='complete'&&e.type=='readystatechange') )
           {
             if( ++i===$imgs.length ) _done();
           }
           else if( _img.readyState === undefined ) // dont for IE
           {
             $(_img).attr('src',$(_img).attr('src')); // re-fire load event
           }
         }; // _checki \\
  
         $(_img).bind('load readystatechange', function(e){_checki(e);});
         _checki({type:'readystatechange'}); // bind to 'load' event...
       });
     } else _done();
   });
 };

Brug:

JScript kode

 $('div#PreLoadImages').onImagesLoaded(function(_this){
     $(_this).remove() //fjerner PreLoadImages fra DOM.
     tegn_scooter(); 
 
   });

Husk at have noget client cache på billederne.

Bruger #13010 @ 08.12.11 20:58

440

Jeg håber virkelig der er en mere simpel måde og jeg ønsker ikke at bruge jquery.
Det er også noget kode som skal vises hvordan man gør ting til andre så derfor skal det gerne være simpelt.

Hvad mener du med client cache ?

Bruger #5789 @ 09.12.11 00:57

640

Det er også simpelt når du har sat det op. Det kan let genbruges, fremover skal du bare lave dit <div> med de ønskede billeder, og du har et event at arbejde med.

Mht til client cache, så sikre at brugeren ikke henter billederne hver gang han besøger din side, eller værre, ved hvert side skift.

Indlæg senest redigeret d. 09.12.2011 00:57 af Bruger #5789

Bruger #5620 @ 09.12.11 13:04

1.500

Det var den jeg mente.

Synes da det er en rimelig simpel kode.

Erklære funktion der skal kaldes når loaded.
Opret billed.
Sæt onload handler
Sæt source
Tjek om billed var cached og hvis ja kald load handler.

Bruger #13010 @ 09.12.11 20:18

440

Hvad siger i til denne løsning ?

JScript kode

 //
 
    var scootera = new Image();
    var scooterb = new Image();
    var scooterx = new Image();
 
    scootera.src = "/htmlgrisen/billeder/billed0107.png";
    scooterb.src = "/htmlgrisen/billeder/billed0091.png";
    scooterx.src = scootera.src;
 
    function doWhileLoading(){
 
       if(scootera.complete && scooterb.complete && scooterx.complete){
 
          setInterval(tegn_scooter, 100);
 
       }else{
 
          setTimeout(doWhileLoading, 100); // udføres hvis billederne endnu ikke er indlæst
 
       }
 
    }
 
    doWhileLoading();

Indlæg senest redigeret d. 11.12.2011 01:16 af Bruger #13010

Bruger #5789 @ 14.12.11 12:24

640

Du mister bare skalerbarheden/flexibiliten, den udfører sikkert jobbet korrekt, men hver gang du skal have tilføjet nogle billeder der skal preloades, skal de først tilføjes til din liste, og laves endnu flere conditions i din if sætning.

Hvis du tænker performance issues mht til konstant at spørge om billederne er loaded, bør du ikke bekymre dig.

Men igen, nogle vil gerne lave noget flexibelt/skalerbart/genbrugligt kode, mens andre bare hurtigt vil have en løsning.

Lav i det mindste et array til dine billede stier og løb det igennem.

<< < 1 2 > >>

JavaScript skal preloade billeder

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler