ホームページ > 記事 > ウェブフロントエンド > javascript_javascript スキルに基づいた画像の遅延読み込みの実装
javascript_javascript スキルに基づいた画像の遅延読み込みの実装
- WBOYオリジナル
- 2016-05-16 15:21:451152ブラウズ
1. 定義
画像の遅延読み込みは遅延読み込みとも呼ばれ、画像の読み込みを遅らせるか、特定の条件が満たされた場合にのみ特定の画像を読み込みます。これは通常、多くの画像を含む Web ページに使用されます。リクエストの数を減らしたり、リクエストの数を遅らせたりして、パフォーマンスを最適化できます。
2. プレゼンテーションフォーム
【1】ロードを遅らせるには、setTimeout または setInterval を使用します。ロードする前にユーザーが離脱すると、当然ロードされません。
【2】条件付きロード、非同期ロードは、特定の条件が満たされた場合、または特定の条件がトリガーされた場合にのみ開始されます。
[3] 視覚的な領域の読み込みは、主にスクロール バーを監視することによって実装されます。これにより、画像が確実に表示されるようになります。ユーザーがプルダウンすると接続され、長い停止は発生しません。
3. 基本手順
【1】Webページ上のすべての写真を同じ写真に設定します
【2】画像に属性 data-original = "img/test.jpg" を追加し、画像の実アドレスを保存します
【3】特定の条件が発生すると、その領域内の画像のsrc属性を実アドレスに自動変更します
4. アプリケーション
1. ボタンをクリックして画像を表示します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<button>加载图片</button>
<img src="#" alt="测试" data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];
oBtn.onclick = function(){
oImg.src = "img/loading.gif";
if(oImg.dataset){
aftLoadImg(oImg,oImg.dataset.original);
}else{
aftLoadImg(oImg,oImg.getAttribute("data-original"));
}
}
function aftLoadImg(obj,url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
}
</script>
</body>
</html>
2. ビジュアルエリアに画像を表示します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
.in{
border: 1px solid black;
margin: 10px;
text-align: center;
height: 400px;
width: 400px;
float: left;
}
.in img{
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
loadImg(aImages);
};
function loadImg(arr){
for( var i = 0,len = arr.length; i < len; i++){
if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
arr[i].isLoad = true;
arr[i].style.cssText = "transition: ''; opacity: 0;"
if(arr[i].dataset){
aftLoadImg(arr[i],arr[i].dataset.original);
}else{
aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
}
(function(i){
setTimeout(function(){
arr[i].style.cssText = "transition: 1s; opacity: 1;"
},16)
})(i);
}
}
}
function aftLoadImg(obj,url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
}
</script>
</body>
</html>
上記がこの記事の全内容です。これが皆さんの学習に役立ち、JavaScript 画像の遅延読み込みを正常に実装できることを願っています。