1

我几乎有这个工作。

我可以放大图像的一部分，但不能放大全部。似乎正在创建包装器并.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>

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

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

链接到插件

4

1 回答 1

1

好的，我找到了你的问题。问题是 $('img.lazy').load();。它被调用了两次。第一次是页面加载时（透明图像）。第二次是当延迟加载完成它的事情并让不透明的图像出现在它的位置时。

您的第二个问题是 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');
});
于 2013-10-31T20:31:54.373 回答