Javascript 在延迟加载的图像上使用jQuery缩放

我几乎让它工作了

我可以将部分图像放大，但不能将整个图像放大。似乎正在创建包装，并在图像和图像占位符上运行

transparent.gif

以下是JS函数前面的HTML:

<img alt="Transparent" class="lazy zoomer" data-original="assets/find_pro.png" src="/assets/transparent.gif">

<span style="display: inline-block; position: relative; overflow: hidden;">
  <span style="display: inline-block; position: relative; overflow: hidden;">
    <img alt="Transparent" class="lazy zoomer" data-original="assets/find_pro.png" id="tester" src="assets/find_pro.png" width="800" style="display: block;">
    <img src="assets/find_pro.png" class="zoomImg" style="position: absolute; top: -120.24242424242425px; left: -58.392144638404px; opacity: 0; width: 1211px; height: 539px; border: none; max-width: none;">
  </span>
  <img src="/assets/transparent.gif" class="zoomImg" style="position: absolute; top: 234.17100371747213px; left: 108.07543640897755px; opacity: 0; width: 45px; height: 45px; border: none; max-width: none;">
</span>

  $('img.lazy').load(function() {
    if ( $( this ).hasClass( "zoomer" ) ) {
      $(this)
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom();
    }
  });

  $("img.lazy").lazyload({ 
    threshold : 200,
    effect : "fadeIn"
  });

以下是我正在使用的JS:

<img alt="Transparent" class="lazy zoomer" data-original="assets/find_pro.png" src="/assets/transparent.gif">

<span style="display: inline-block; position: relative; overflow: hidden;">
  <span style="display: inline-block; position: relative; overflow: hidden;">
    <img alt="Transparent" class="lazy zoomer" data-original="assets/find_pro.png" id="tester" src="assets/find_pro.png" width="800" style="display: block;">
    <img src="assets/find_pro.png" class="zoomImg" style="position: absolute; top: -120.24242424242425px; left: -58.392144638404px; opacity: 0; width: 1211px; height: 539px; border: none; max-width: none;">
  </span>
  <img src="/assets/transparent.gif" class="zoomImg" style="position: absolute; top: 234.17100371747213px; left: 108.07543640897755px; opacity: 0; width: 45px; height: 45px; border: none; max-width: none;">
</span>

  $('img.lazy').load(function() {
    if ( $( this ).hasClass( "zoomer" ) ) {
      $(this)
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom();
    }
  });

  $("img.lazy").lazyload({ 
    threshold : 200,
    effect : "fadeIn"
  });

$（'img.lazy'）.load（函数（）{
if（$（this）.hasClass（“缩放器”））{
$（本）
.wrap（“”）
.css（'显示'，'块'）
.parent（）
.zoom（）；
}
});
$（“img.lazy”）.lazyload（{
阈值：200，
效果：“法丹”
});

好的，我找到了你的问题。问题是$（'img.lazy'）.load（）；。有人叫了两次。第一次是页面加载时（透明图像）。第二次是lazyload执行其操作并使不透明图像出现在其位置

第二个问题是zoom（）作用于透明图像（img.zoomer的src）

第三个问题是，这种改变否定了lazyload的效用。我终于想出了一个有效的解决方案

要解决您的问题，请执行以下操作：

$('img.lazy').load(function() {
  $(this).lazyload({ 
    threshold : 200,
    effect : "fadeIn"
  });
  if ($(this).attr('src') === $(this).attr('data-original') && $(this).hasClass('zoomer')) {
    $(this)
      .wrap('<span style="display:inline-block"></span>')
      .css('display', 'block')
      .parent()
      .zoom();
  }
  console.log($(this).attr('src') + ' loaded');
});

$（'img.lazy'）.load（函数（）{
$（此）.lazyload（{
阈值：200，
效果：“法丹”
});
if（$（this.attr（'src'）===$（this.attr（'data-original'）&&$（this.hasClass（'zoomer'））{
$（本）
.wrap（“”）
.css（'显示'，'块'）
.parent（）
.zoom（）；
}
log（$（this.attr（'src'）+'loaded'）；
});

好的，我找到了你的问题。问题是$（'img.lazy'）.load（）；。有人叫了两次。第一次是页面加载时（透明图像）。第二次是lazyload执行其操作并使不透明图像出现在其位置

第二个问题是zoom（）作用于透明图像（img.zoomer的src）

第三个问题是，这种改变否定了lazyload的效用。我终于想出了一个有效的解决方案

要解决您的问题，请执行以下操作：

$('img.lazy').load(function() {
  $(this).lazyload({ 
    threshold : 200,
    effect : "fadeIn"
  });
  if ($(this).attr('src') === $(this).attr('data-original') && $(this).hasClass('zoomer')) {
    $(this)
      .wrap('<span style="display:inline-block"></span>')
      .css('display', 'block')
      .parent()
      .zoom();
  }
  console.log($(this).attr('src') + ' loaded');
});

$（'img.lazy'）.load（函数（）{
$（此）.lazyload（{
阈值：200，
效果：“法丹”
});
if（$（this.attr（'src'）===$（this.attr（'data-original'）&&$（this.hasClass（'zoomer'））{
$（本）
.wrap（“”）
.css（'显示'，'块'）
.parent（）
.zoom（）；
}
log（$（this.attr（'src'）+'loaded'）；
});

我不知道为什么，但这对我来说仍然不起作用！也许回拨以应用包装器。lazyload会更好？我看不到您的“测试文档”上反映的更改。哦，我发现还有另一个问题！您的缩放是根据您要缩放的图像的“src”属性进行的（在本例中是透明的），而不是原始数据。让我编辑我的解决方案。早上到了，我解决了问题。请重新考虑我的答案。我不知道为什么，但这对我仍然不起作用！也许回拨以应用包装器。lazyload会更好？我看不到您的“测试文档”上反映的更改。哦，我发现还有另一个问题！您的缩放是根据您要缩放的图像的“src”属性进行的（在本例中是透明的），而不是原始数据。让我编辑我的解决方案。早上到了，我解决了问题。请重新考虑我的答案。