JQuery elevateZoom only works when I set a warning () before

Question

I have this code to run jQuery elevateZoom , but only works if I put it alert().

I'm already trying to use / 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
        }); 
    }); 
});

This is another version of the code I tried:

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

Answer 1

This is due to what $(document).ready()happens when loading the DOM, and not when loading all images. A warning causes a delay and allows you to download the image.

The following should work:

$(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
  });

});