Toon posts:

[Javascript] Afbeelding 100% geladen

Pagina: 1
Acties:

Onderwerpen


  • ZeroXT
  • Registratie: december 2007
  • Laatst online: 18-09 18:21
De bedoeling is dat er een laad afbeelding getoond word en op moment dat er een afbeelding geladen is met javascript geplaatst wordt.

code:
1
2
var afbeelding = document.createElement('img');
afbeelding.src = 'afbeelding.jpg';


Op moment dat de afbeelding 100% geladen is wil ik dat deze ergens word geplaatst.

code:
1
document.getElementById('div').appendChild(afbeelding);


Vraag is: Hoe weet ik dat de afbeelding 100% is geladen zodat deze het laad afbeelding kan vervangen ipv dat de afbeelding geplaatst word terwijl die nog moet worden geladen.


edit:
Volgens mij heb ik het al voor elkaar:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var afbeelding = document.createElement('img');
    afbeelding.src = 'http://vistawallpapers.files.wordpress.com/2007/03/vista-wallpaper-grass-ripples.jpg';
    (
        function(afbeelding)
        {
            afbeelding.onload = function()
            {
                plaats(afbeelding);
            }
        }
    )(afbeelding);
    
function plaats(afbeelding)
{
    document.getElementById('afbeelding').appendChild(afbeelding);
}

[Voor 28% gewijzigd door ZeroXT op 13-10-2010 17:25]


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
JavaScript:
1
2
3
$('<img src="">').load(function(){
   $(this).appendTo('#afbeelding');
});


http://www.jquery.com

Overigens zijn er een aantal browsers die het event niet afvuren bij het laden uit de cache, dus laat je applicatie niet afhangen van dit gedrag (zoals hierboven :P).

Of gebruik de workaround plugin: http://github.com/peol/jq...aw/master/ahpi.imgload.js

[Voor 95% gewijzigd door Bosmonster op 13-10-2010 18:22]


  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 13-09 19:02
Bosmonster schreef op woensdag 13 oktober 2010 @ 18:08:
Overigens zijn er een aantal browsers die het event niet afvuren bij het laden uit de cache, dus laat je applicatie niet afhangen van dit gedrag (zoals hierboven :P).
Eigenlijk nooit problemen mee gehad, zolang je het load event maar bindt voordat je het src attribuut op het img element zet.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
$.extend({
  getImage: function(url, success){
    $("<img />")
      .bind("load", function(event){
        $(this).unbind("load");
        if ($.isFunction(success))
        {
          success.apply(this, [this, url]);
        }
      })
      .attr("src", url);
  }
});


JavaScript:
1
2
3
$(document).ready(function(){
  $.getImage("foobar.jpg", function(img, url){ $(document).append(img); })
});

  • ZeroXT
  • Registratie: december 2007
  • Laatst online: 18-09 18:21
Maar dat is allemaal leuk en aardig maar aan jquery heb ik niets. Ik werk namelijk zonder libraries zoals ook duidelijk te zien is in de startpost. Wel neem ik de tip mee van Bosmonster.

  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
R4gnax schreef op donderdag 14 oktober 2010 @ 08:50:
[...]


Eigenlijk nooit problemen mee gehad, zolang je het load event maar bindt voordat je het src attribuut op het img element zet.
Die optie heb je alleen niet altijd als je het load event wilt afvangen van images die in je pagina staan (wat vaak het geval is bij unobtrusive controls).
ZeroXT schreef op donderdag 14 oktober 2010 @ 09:07:
Maar dat is allemaal leuk en aardig maar aan jquery heb ik niets. Ik werk namelijk zonder libraries zoals ook duidelijk te zien is in de startpost. Wel neem ik de tip mee van Bosmonster.
Ach, er is altijd ruimte voor verbetering ;)

[Voor 29% gewijzigd door Bosmonster op 14-10-2010 09:52]



Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee