Question

我正在尝试使用Unveil JQuery插件，但不行。这个插件类似于Lazyload，但更多简单，没有效果和事件。

当我加载HTML时，插件加载所有图像，我需要在滚动时逐个加载。 Chrome load all images

   <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Prueba</title>
    <style>
    img {
      opacity: 0;
      transition: opacity .3s ease-in;
    } 
    </style>
</head>

<body>
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/4/" />
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/3/" >
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/2" />
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/1" />
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/6" />
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/7" />
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/8" />
    <img src="loader.gif" data-src="http://lorempixel.com/800/600/city/9" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

     $("img").unveil(0, function(){

        $(this).load(function(){
            this.style.opacity=1;

        });
    });
});
    </script>
</body>
</html>

¿任何想法？

Answer 1

我找到了解决方案。这种效果需要图像尺寸才能有效地工作。例如。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Prueba</title>
<style>
img {
  opacity: 0;
  transition: opacity .3s ease-in;
  width:10%; 
  height:10%;
} 
</style>
</head>

<body>
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/4/" />
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/3/" >
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/2" />
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/1" />
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/6" />
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/7" />
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/8" />
<img src="loader.gif" data-src="http://lorempixel.com/800/600/city/9" />
<script type="text/javascript" src="https://code.jquery.com/jquery-    2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.js">     </script>
<script type="text/javascript">
$(document).ready(function() {

 $("img").unveil(0, function(){

    $(this).load(function(){
        this.style.opacity=1;

    });
});
});
</script>
</body>
</html>

展开加载所有图片

1 个答案: