如何在需要时加载图像

-1

我有这个简单的图像放大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，让我知道我需要在代码中添加什么。

来源

2013-06-26 RaduS

“演示示例”页面加载无论是在年初的图像，一个小['png']（http://elegantmembers.com/demo/images/small/image1.png ）和一个大的['jpg']（http://elegantmembers.com/demo/images/large/image1.jpg），大约175 KB。 –

是的，我知道。我的问题是，如何防止加载大图像，直到鼠标悬停在图像上。我不希望它在乞讨中加载 – RaduS

它看起来不像您所使用的插件支持。 http://www.elevateweb.co.uk/image-zoom/configuration –

img element（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（）动作可能不会同时大的图像即时正在加载。

来源

2013-06-26 15:25:37

感谢您的代码。你能告诉我应该在哪里插入它。 – RaduS

只是将代码嵌入标准的jQuery（function（）{}）;启动事件处理程序，只要dom准备好就会发生...... – 2013-06-26 15:42:49

谢谢DBJDBJ :) – RaduS

我使用这个想法，通过向图像添加缩放类来启动对同一页上任意数量图像的缩放。它的工作原理没有任何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 
    } 
})

来源

2014-05-06 14:35:03 osyntax

如何在需要时加载图像

回答

相关问题