只有當我把一個提醒（）之前

Question

jQuery elevateZoom工作我有此代碼啓動jQuery elevateZoom但只有在我把alert()之前。

我已經嘗試使用/不使用load()函數。

jQuery(document).ready(function($){ 
    alert("Hi"); 
    $("#sh-product-main-image").load(function(){ 
     $(this).elevateZoom({ 
      zoomType: "inner", 
      debug : true, 
      cursor: "crosshair", 
      zoomWindowFadeIn: 500, 
      zoomWindowFadeOut: 500 
     }); 
    }); 
}); 

這是代碼的另一個變化我曾嘗試：

jQuery(document).ready(function($){ 
    alert("Hi"); 
    $("#sh-product-main-image").elevateZoom({ 
     zoomType: "inner", 
     debug : true, 
     cursor: "crosshair", 
     zoomWindowFadeIn: 500, 
     zoomWindowFadeOut: 500 
    }); 
}); 

Answer 1

這是因爲$(document).ready()情況發生在DOM被加載，而不是當所有的圖像加載。警報會導致延遲，並允許加載圖像的時間。

下面應該工作：

$(window).on("load", function() { 
    $("#sh-product-main-image").elevateZoom({ 
     zoomType: "inner", 
     debug : true, 
     cursor: "crosshair", 
     zoomWindowFadeIn: 500, 
     zoomWindowFadeOut: 500 
    }); 
}); 

Answer 2

我覺得elevateZoom插件，只需要DOM，以便滿載正常工作，而不是頁面加載！ （通常建議使用DOM負載在頁面加載！）

我認爲下面的代碼就足夠了：

$(function() { /* Executed after DOM did load */ 

    $("img#sh-product-main-image").elevateZoom({ 
    zoomType: "inner", 
    debug : true, 
    cursor: "crosshair", 
    zoomWindowFadeIn: 500, 
    zoomWindowFadeOut: 500 
    }); 

});