jQuery elevateZoom funktioniert nur, wenn ich eine Warnung() vor

Question

setzen

Ich habe diesen Code zu starten jQuery elevateZoom aber funktioniert nur, wenn ich eine alert() vor.

Ich habe schon mit/ohne load() Funktion versucht.

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

Dies ist eine weitere Variante der Code, den ich versucht habe:

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

Answer 1

Dies liegt daran, $(document).ready() passiert, wenn das DOM geladen wird, nicht, wenn alle Bilder geladen sind. Der Alarm verursacht eine Verzögerung und ermöglicht das Laden des Bildes.

Folgendes sollte funktionieren:

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

Answer 2

denke ich elevateZoom Plugin nur DOM erfordert voll, um richtig zu funktionieren geladen werden, nicht die Seite Last! (DOM Last wird in der Regel über Seite Last empfohlen!)

denke ich, der Code unten genug wäre:

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

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

});