jQuery elevateZoom 只有在我之前放置一个 alert() 时才起作用

Question

我有启动 jQuery elevateZoom 的代码，但是，只有在我之前输入 alert() 时才有效。

我已经尝试了 with/without 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
  });

});

jQuery elevateZoom 只有在我之前放置一个 alert() 时才起作用

jQuery elevateZoom work only when I put an alert() before

javascript

jquery

elevatezoom