Wie Javascript Image-Objekt zu bestehenden Img Element von JSP

Question

JSP-Code geschrieben wird, wie unten,

< img src='<%=imageURL%>' id='advt-image-top' border='0' alt=''" /><br/> 

Wenn der Wert von imageURL ist wie,

http://1.2.3.4:5678/ads/avw.php?zoneid=1234567890&cb=INSERT_RANDOM_NUMBER_HERE
(Beispiel-URL, die zufällig holt zuweisen werbe~~POS=TRUNC von Ad-Server)

Nun gleiche JSP-Seite enthält JavaScript-Code wie folgt:

$(document).ready(function() { 
    var imgAd = new Image(); 
    imgAd.src = '<%=imageURL%>'; 
    imgAd.onload = function(){ 
     if((this.width == 1 && this.height == 1)){ 
      document.getElementById('advt-image-top').src='img/default_top.jpg'; 
     } 
    } 
} 

Die obigen JavaScript-Code-Prüfungen - wenn das vom Ad-Server zurückgegebene Bild die Größe 1x1 hat, dann sollte es durch default-image ersetzt werden.

Problem ist, über den gesamten Code-Snippet führt "imageURL" zweimal, um ein Bild von Ad-Server zu holen: ein, um zu überprüfen, ob Bild-zurückgegeben-von-Ad-Server der Größe 1x1 und andere während der Tag-Ausführung .

Wie kann ich den obigen Code optimieren, so dass "imageURL" nur einmal ausgeführt wird?
Wie kann ich Image() - Objekt von Javascript zuweisen (nachdem 1x1 Validierung übergeben wurde) zu JSPs 'advt-image-top' Element? Vielen Dank im Voraus.

Answer 1

Sie nur eine geringfügige Anpassung an Ihren JavaScript-Code benötigt, gibt es keine Notwendigkeit, eine Image zu erstellen:

$(document).ready(function() { 
    var imgAd = document.getElementById('advt-image-top'); 
    imgAd.onload = function(){ 
     if((this.width == 1 && this.height == 1)){ 
      imgAd.src='img/default_top.jpg'; 
     } 
    } 
} 

Allerdings könnte das Bild, bevor das Dokument bereit Feuer geladen werden und das Onload-Ereignis verlieren, so Sie möchten vielleicht die Standard-uRL in Ihrem Tag laden:

< img src='img/default_top.jpg' id='advt-image-top' border='0' alt=''" /><br/> 

... und die Remote-uRL durch den Code anwenden:

$(document).ready(function() { 
    var imgAd = document.getElementById('advt-image-top'); 
    imgAd.onload = function(){ 
     if((this.width == 1 && this.height == 1)){ 
      imgAd.src='img/default_top.jpg'; 
     } 
    } 
    imgAd.src='<%=imageURL%>'; 
} 

EDIT: wahrscheinlich ist der beste Weg, die img-Tag insgesamt aus dem JSP zu entfernen und alles mit Javascript zu schreiben. Angenommen, das Bild ist in einem Element mit der ID "container" enthalten:

$(document).ready(function() { 
    var imgAd = new Image(); 
    imgAd.onload = function(){ 
     if((this.width == 1 && this.height == 1)){ 
      imgAd.src='img/default_top.jpg'; 
     } 
    } 
    imgAd.src='<%=imageURL%>'; 
    imgAd.id='adv-image-top'; 
    imgAd.border=0; 
    document.getElementById('container').appendChild(imgAd); 
} 

Answer 2

@ dipanda, Vielen Dank für Ihre Kommentare. Hat mir geholfen, mein Problem zu lösen.

var $imgObj = $("<img/>",{src:"<%=imageURL%>"}); 
$imgObj.load(function(){ 
    var imgJS = $imgObj[0]; 
    if(imgJS.height == 1 && imgJS.width == 1){ 
     document.getElementById('advt-image-top').src='img/default_top.jpg'; 
    }else{ 
     if($("#advt-image-top")!=null && $("#advt-image-top")!=undefined){ 
      $("container").append($imgObj); 
     } 
    } 
};