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

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