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

Question

I have this code to launch jQuery elevateZoom but, only works if I put an alert() before.

I have already try with/without load() function.

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 variation of the code I have tried:

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

score 2 · Accepted Answer · answered Mar 31 '17 at 19:27

This is because $(document).ready() happens when the DOM is loaded, not when all the images are loaded. The alert causes a delay and allows time for the image to be loaded.

The following should work:

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

score 1 · Answer 2 · edited May 12 '17 at 04:20

I think elevateZoom plugin requires only DOM to be fully loaded in order to work properly, not the Page load! (DOM load is normally recommended over Page load!)

I think the code below would be enough:

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

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

});

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

2 Answers2