image.onload-gebeurtenis en browsercache

Ik wil een waarschuwingsvenster maken nadat een afbeelding is geladen, maar als de afbeelding is opgeslagen in de browsercache, wordt de gebeurtenis .onloadniet geactiveerd.

Hoe activeer ik een waarschuwing wanneer een afbeelding is geladen, ongeacht of de afbeelding in de cache is opgeslagen of niet?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}

Antwoord 1, autoriteit 100%

Terwijl u de afbeelding dynamisch genereert, stelt u de eigenschap onloadin voor de src.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Fiddle– getest op de nieuwste Firefox- en Chrome-releases.

Je kunt het antwoord ook gebruiken in deze post, die ik heb aangepast voor een enkele dynamisch gegenereerde afbeelding:

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

Fiddle

Antwoord 2, autoriteit 7%

Als de src al is ingesteld, wordt de gebeurtenis in de cache geactiveerd voordat de gebeurtenishandler zelfs maar gebonden is. U moet de gebeurtenis dus ook activeren op basis van .complete.

codevoorbeeld:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

Antwoord 3, autoriteit 2%

Er zijn twee mogelijke oplossingen voor dit soort situaties:

1. Gebruik de oplossing die wordt voorgesteld in dit bericht

2. Voeg een uniek achtervoegsel toe aan de afbeelding srcom de browser het opnieuw te laten downloaden, zoals dit:

   var img = new Image();
   img.src = "img.jpg?_="+(new Date().getTime());
   img.onload = function () {
       alert("image is loaded");
   }
   

In deze code elke keer dat u de huidige tijdstempel toevoegt aan het einde van de afbeeldings-URL, maakt u deze uniek en zal de browser de afbeelding opnieuw downloaden

Antwoord 4, autoriteit 2%

Ik ben vandaag hetzelfde probleem tegengekomen. Na verschillende methoden geprobeerd te hebben, realiseer ik me dat het plaatsen van de code van de grootte in $(window).load(function() {})in plaats van document.readyeen deel zou oplossen van het probleem (als u de pagina niet ajaxt).

Antwoord 5

Ik heb ontdekt dat je dit gewoon in Chrome kunt doen:

 $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

Als je de .src op zichzelf zet, wordt de onload-gebeurtenis geactiveerd.