Question

我有这个简单的图像缩放jQuery。这是一个Demo example。它使用elevateZoom jQuery。

背后的代码非常简单：

<img id="zoom_05" src='small_image1.png' data-zoom-image="large_image1.jpg"/>
<script>
   $vc("#zoom_05").elevateZoom({
  zoomType              : "inner",
  cursor: "crosshair"
});
</script>

我的问题是，只有当鼠标悬停在它上面时，我才能按需加载大图像。请看一下这个demo example，让我知道我需要在代码中添加什么。

Answer 1

上面的

img元素（id =“zoom_05”），不会自己加载large_image1.jpg。由于elevateZoom（）查看其数据缩放图像值并立即加载它，因此会发生大图像加载。解决此问题的一种方法是推迟使用elevateZoom（）直到用户首次悬停在小图像上。快速举例：

   jQuery( function () {

   var elevate_zoom_attached = false, $zoom_05 = $("#zoom_05") ;

    $zoom_05.hover(
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_05.elevateZoom({
                  zoomType : "inner",
                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_05.off("hover");
        }
     }
  );

}) ;

请注意，这是一个快速的，我的头顶代码，但应该工作...... 同样在这种情况下，在进行大图像加载时，elevateZoom（）动作可能不会立即生效。

Answer 2

我使用这个想法通过向图像添加缩放类来启动同一页面上任意数量图像的缩放。它没有任何HOVER OUT

<img class="zoom" src="myimage.png" data-zoom-image="mybigimage.png"/>

$('.zoom').hover(
  // hover IN
  function () {

   var currImg = $(this); //get the current image
   if (!currImg.hasClass('zoomon')) { //if it hasn't been initialized
       currImg.elevateZoom(); //initialize elevateZoom
       currImg.addClass('zoomon'); //add the zoomon class to the img so it doesn't re-initialize
   }
})

如何按需加载图像

2 个答案: