如何在需要時加載圖像

-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

如何在需要時加載圖像

回答

相關問題