如何用jQuery重寫此內聯JavaScript？

Question

我使用內聯javascript進行了以下標記，並希望將其更改為Jquery。 任何幫助，將不勝感激。

<a title="823557" href="/PhotoGallery.asp?ProductCode=471823557" id="product_photo_zoom_url">
<img border="0" onload="vZoom.add(this, '/v/vspfiles/photos/471823557-2.jpg');"
alt="823557"
src="/v/vspfiles/photos/471823557-2T.jpg" id="product_photo"></a>

我想我需要用這個嗎？

$(function(){
<---- somecode---->
});

Answer 1

$(function () {
   $("#product_photo").load(function (e) {
      vZoom.add(this, this.src.replace('T.', '.'));
   })
})();

如果$由於某種原因無法使用，這也應該適用。 我采納了Kranu的建議，因為該庫很可能只需要將DOM作為先決條件而不是load事件：

jQuery(function ($) {
    $("#product_photo").each(function () { // in case there is more than one 
        vZoom.add(this, this.src.replace('T.', '.'));
    });
});

Answer 2

請注意，不需要在img上放置單獨的綁定事件，因為$(function() { })會等到主體加載為止。

$(function(){
    vZoom.add(document.getElementById('product_photo'),'/v/vspfiles/photos/471823557-2.jpg');
});

Answer 3

不確定要執行的操作，但實際上您會從HTML中刪除圖像並使用JS動態加載。 加載后，您可以將其注入DOM並設置onload事件。

var jsImg = new Image();
jsImg.onload = function(){
  vZoom.add(this,'/v/vspfiles/photos/471823557-2.jpg');
  var img = document.createElement('IMG');
  img.setAttribute('id','product_photo');
  img.setAttribute('alt','823557');
  img.setAttribute('src','/v/vspfiles/photos/471823557-2T.jpg');
  img.style.border = 'none';
  //inject image now in the DOM whereever you want.
};
jsImg.src = '/v/vspfiles/photos/471823557-2T.jpg';