懒加载不工作，不显示图像？

我想在延迟加载效果中使用淡入淡出效果。虽然我遵循了所有的指示，但仍然没有出现图像！任何人都可以帮助更多吗？代码：懒加载不工作，不显示图像？

<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script> 
</head> 

<body> 
<div class="collateral-body-image"> 
    <img class="lazy" data-original="images/vivid-collateral.jpg" width="1920" height="594"> 
</div> 


<script type="text/javascript"> 
$(function(){ 
    $("img.lazy").lazyload({ 
    effect: "fadeIn" 
    }); 
}); 

</script> 

</body>

来源

2015-06-21 Henry Brown

你验证jQuery和lazyload链接？这可能是一个简单的错误的url问题... – Banana

我如何验证他们？ –

或者打开您的浏览器的开发控制台，然后转到源代码并查看文件是否正确加载，或者将url复制并粘贴到您的地址栏并将它们追加到当前路径（例如：如果您的网站位于** www.mysite。 com/myproject/example.html **，那么你在你的代码片段中发布的链接应该位于** www.mysite.com/myproject/jquery.js **和lazyload相同）。并查看文件是否在浏览器中打开。 – Banana

如果你想让它运行只是使用CDN网址加载它。稍后，您可以在本地下载此脚本，并使用localhost上的本地Web服务器提供此脚本。

快速到运行代码，

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> 
</head> 
<body> 

    <div class="collateral-body-image"> 
     <img class="lazy" data-original="http://montanasteele.com/wp-content/uploads/gallery/vivid-condos/vivid-collateral-02.jpg" width="800" height="800"> 
    </div> 

<script> 
    $(function(){ 
     $("img.lazy").lazyload({ 
      effect: "fadeIn" 
     }); 
    }); 
</script>

来源

2015-06-21 12:51:58 kishanio

这就是我所做的，谢谢！ –

懒加载不工作，不显示图像？

回答

相关问题