Question

我几乎有这个工作。

我可以让图像的一部分变焦，但不是整个事情。似乎正在创建包装器并且.zoom()在图像和图像占位符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>

当我删除额外的图像节点和额外的span时，一切正常：

<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: -100.84848484848484px; left: -402.1153366583541px; opacity: 0; width: 1211px; height: 539px; border: none; max-width: none;">
</span>

这是我正在使用的JS：

  $('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"
  });

Link to plugin

Answer 1

好的，我跟踪了解你的问题。问题是$（'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');
});

在延迟加载的图像上使用jQuery Zoom

1 个答案: