Heim > Artikel > Web-Frontend > Implementierung des verzögerten Ladens von Bildern basierend auf Javascript
Implementierung des verzögerten Ladens von Bildern basierend auf Javascript
- 高洛峰Original
- 2016-12-27 15:30:091126Durchsuche
1. Definition
Das verzögerte Laden von Bildern wird auch als verzögertes Laden bezeichnet oder nur dann, wenn bestimmte Bedingungen erfüllt sind. Es wird normalerweise für Webseiten mit vielen Bildern verwendet. Sie können die Anzahl der Anfragen reduzieren oder die Anzahl der Anfragen verzögern, um die Leistung zu optimieren.
2. Präsentationsform
【1】Verzögertes Laden, verwenden Sie setTimeout oder setInterval, um das Laden zu verzögern. Wenn der Benutzer vor dem Laden geht, wird es natürlich nicht geladen.
【2】Bedingtes Laden, asynchrones Laden beginnt nur, wenn bestimmte Bedingungen erfüllt sind oder bestimmte Bedingungen ausgelöst werden.
【3】 Beim Laden des sichtbaren Bereichs wird nur der Bereich geladen, den der Benutzer sehen kann. Dies wird hauptsächlich durch die Überwachung der Bildlaufleiste erreicht dass das Bild angezeigt wird, wenn der Benutzer es herunterzieht. Es wird einfach angezeigt und es entsteht keine lange Pause.
3. Grundlegende Schritte
【1】Stellen Sie die Bilder auf der Webseite auf das gleiche Bild ein
【2】Fügen Sie data-original = "img/test.jpg" hinzu Bildattribut, speichern Sie die tatsächliche Adresse des Bildes
【3】Wenn bestimmte Bedingungen ausgelöst werden, ändern Sie automatisch das src-Attribut des Bildes in diesem Bereich in die tatsächliche Adresse
4. Anwendung
1. Klicken Sie auf die Schaltfläche, um das Bild anzuzeigen
<!DOCTYPE html>
<html>
<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. Zeigen Sie das Bild im visuellen Bereich an
<!DOCTYPE html>
<html>
<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>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
<li><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
<li><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>Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird jedem beim Lernen und der erfolgreichen Implementierung von Javascript-Bildfaulheit helfen.
Weitere Artikel zum verzögerten Laden von Bildern auf Basis von JavaScript finden Sie auf der chinesischen PHP-Website!