推出加載所有圖像

我試圖使用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>

¿有什麼想法？

來源

2016-08-13 El Hombre Sin Nombre

'但是不工作' - 如果是這樣，你不會問一個問題......你能詳細說明一下，代碼是做什麼的？這與你期望的做法有何不同？ –

只有當我滾動時，纔會加載這個JQuery圖像，但在我的情況下，當我打開HTML加載所有圖像。看到這個例子http://luis-almeida.github.io/unveil/ –

我找到了解決方案。這種效果需要圖像大小才能正常工作。例如。

<!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>

來源

2016-08-27 08:37:00

推出加載所有圖像

回答

相關問題