[JavaScript] Prüfen wann Bild vollständig geladen ist

Dieses Thema im Forum "Webentwicklung" wurde erstellt von marcel182, 4. Januar 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 4. Januar 2011
    Prüfen wann Bild vollständig geladen ist

    Hey Leute hab eine Gallerie die mitlerweile auch mit fade in und out beim bildwechsel klappt.

    folgendes problem habe ich aber und zwar das er einfadet bevor der browser das bild geladen hat.

    source code
    HTML:
    //dort tauscht er das bild. as[b] ist der pfad zum neuen
document.images['bild02'].src = as[b];

//hier wird das div wieder eingeblndet in dem das bild liegt. diese 2 befehle müssten auf das laden des bildes warten.
new Effect.Opacity('opacity_demo', {from: 0, to: 1, duration: 1 });
t=setTimeout(\"swap1()\",4000);
    danke für eure hilfe habe schon sehr sehr viel gegoogelt zu dem thema aber leider hat keine lösung funktioniert.

    gruß
    marcel
     
  3. 4. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    hi,

    wenn du mit einen framework arbeitest, solltest du da mal gucken.
    ich arbeite gerne mit mootools dafür gäbe es dann das
    MooTools Docs - Utilities/Assets
     
  4. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    arbeite teilweise mit Home — Scriptaculous Documentation

    gibts wirklich keine möglichkeit java prüfen zu lassen ob ein bild schon fertig geladen ist? schleifen die das prgramm unterbrechen kriege ich schon selber hin denk ich...

    gruß
    marcel
     
  5. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    onload sollte bei einem Fertig geladenen Bild getriggert werden
     
  6. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    beispiel wäre schön?
     
  7. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    HTML:
    var img = new Image();
 img.onload = function()
 {
 alert('Bild wurde vollständig geladen!');
 }
 img.src = 'irgendwo/irgendwas.jpg';
     
  8. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    Code:
    //dort tauscht er das bild. as[b] ist der pfad zum neuen
var loader = new Image(), src = as[b];

// onload event abwarten
loader.onload = function() {
 document.images['bild02'].src = src;
 
 $("opacity_demo").appear({ 
 from: 0, 
 to: 1, 
 duration: 1,
 
 afterFinish: function() {
 // 4000 - 1000 (duration)
 window.setTimeout(swap1, 3000);
 }
 });
};

// wichtig: jetzt erst "src" zuweisen, da bilder im cache sonst 
// sofort "onload" feuern bevor der event abgefangen werden kann
loader.src = src;
     
  9. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    danke euch allen es klappt so weit erklärung für andere sollten ja jetzt genug im threat stehen.

    ansonsten sieht das bei mir jetzt so aus:
    PHP:
    //bild austausch
    document . images [ 'bild02' ]. src  =  as[ b ];


            document . images [ 'bild02' ]. onload  = function()
          {
                 document . getElementById ( 'beschriftung' ). innerHTML  =  schrift [ b ];
                 document . getElementById ( 'zaehler' ). innerHTML  =  '' + d + '/' + l + '' ;

                 clearTimeout ( ts );



            new      Effect . Opacity ( 'opacity_demo' , { from :  0 ,  to :  1 ,  duration :  1  });
            
            if(     timer_is_on == 1 )
                 t = setTimeout ( "swap1()" , 4000 );
         

         }
    gruß und dank
    marcel
     
  10. 5. Januar 2011
    AW: Prüfen wann Bild vollständig geladen ist

    wie gut, dass du meinen post nicht gelesen hast. viel spaß beim debuggen...
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.