すべての画像を読み込んでください

私はJqueeryプラグインを公開しようとしていますが、うまくいきません。このプラグインはLazyloadに似ていますが、効果やイベントはなく、の簡単なです。すべての画像を読み込んでください

HTMLを読み込むと、プラグインがすべての画像を読み込み、スクロールするときに1つずつ読み込む必要があります。 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

すべての画像を読み込んでください

答えて

関連する問題