如何按需加载图像答案

【问题标题】：How to load image on demand如何按需加载图像
【发布时间】：2013-06-26 14:58:04
【问题描述】：

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

【问题讨论】：

“demo example”页面在开头加载两张图片，一个小的png和一个大的jpg，都大约175 KB。
是的，我知道。我的问题是如何防止在鼠标悬停在图像上之前加载大图像。我不希望它在乞讨时加载
您使用的插件似乎不支持该功能。 elevateweb.co.uk/image-zoom/configuration
那我有什么办法吗？
这是因为我在脚本末尾添加了var $vc = jQuery.noConflict();，所以它不会与我拥有的其他 jQuery 冲突。

标签： javascript jquery image ondemand

【解决方案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() 操作可能不会在大图像加载时立即执行。

【讨论】：

感谢您的代码。你能告诉我应该在哪里插入它。
只是将代码嵌入到标准的jQuery中(function () {});启动事件处理程序，一旦 dom 准备好就会发生...

【解决方案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
   }
})

【讨论】：