Heim > Artikel > Web-Frontend > Ideen zum verzögerten Laden von js und Erklärung zum verzögerten Laden auf dem ersten Bildschirm
Ideen zum verzögerten Laden von js und Erklärung zum verzögerten Laden auf dem ersten Bildschirm
- 巴扎黑Original
- 2017-07-24 14:31:521811Durchsuche
Funktion: Sicherstellen, dass die Seite schnell geöffnet wird (wenn die Startseite nicht innerhalb von 3 Sekunden geöffnet werden kann, gilt sie als tote Seite)
Prinzip:
1) Für die Bilder im ersten Bildschirminhalt: Geben Sie zunächst dem entsprechenden Bereich ein Standardbild (das Standardbild muss sehr klein sein und kann im Allgemeinen innerhalb von 5 KB beibehalten werden), wenn das erste Bildschirminhalt wird geladen. Nach Abschluss (oder Sie können eine Verzögerungszeit angeben) beginne ich mit dem Laden des echten Bildes
2), für die Bilder in anderen Bildschirmen: Ich gebe auch ein Standardbild an . Bit, wenn die Bildlaufleiste zum entsprechenden Bereich scrollt, beginnen wir mit dem Laden des echten Bildes
Erweiterung: Asynchrones Laden von Daten, beginnend mit dem Laden und Binden nur der Daten der ersten beiden Wenn die Seite zum entsprechenden Bereich scrollt, werden die Daten zur Datenbindung erneut angefordert
Einzelheiten finden Sie in der Abbildung unten
Der verzögerte Ladecode für den ersten Bildschirm lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
font-size:14px;
}
#banner{
margin:10px auto;
width:300px;
height:150px;
border:1px solid green;
background:url('img/default.gif') no-repeat center center;/*给当前的区域加一个默认图占位，告诉用户此处的图片正在加载中*/}
#banner img{
display:none;/*在开始的时候IMG的SRC属性没有地址，这样的话在IE浏览器中会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后在显示*/width:100%;
height:100%;
}</style>
</head>
<body>
<div id='banner'>
<!--trueImg是当前标签的自定义属性，存储的是真实图片的地址-->
<img src="" alt="" trueImg="img/jd.jpg">
</div>
<script>var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0]
window.setTimeout(function(){// imgFir.src = imgFir.getAttribute('trueImg');// imgFir.style.display = "block"//以上处理还是不完整的：如果我们获取的真实图片的地址是错误的，赋值给IMG的SRC属性的时候，不仅控制台会报错，而且页面中还会出现碎图//获取图片的地址，验证地址的有效性，是有效的才赋值，不是有效的是不进行处理的// var oImg = document.createElement('img')var oImg = new Image;//创建一个临时的IMG标签oImg.src = imgFir.getAttribute('trueImg');
oImg.onload = function(){//当图片能够正常加载imgFir.src = this.src;
imgFir.style.display = "block";
oImg = nullconsole.log('加载完成')
}
console.log('正在加载中...')
},500)</script>
</body>
</html> Mehr Verzögertes Laden eines einzelnen Bildes auf dem Bildschirm
Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
font-size:14px;
}
#banner{
margin:10px auto;
width:300px;
height:150px;
border:1px solid green;
background:url('img/default.gif') no-repeat center center;/*给当前的区域加一个默认图占位，告诉用户此处的图片正在加载中*/}
#banner img{
display:none;/*在开始的时候IMG的SRC属性没有地址，这样的话在IE浏览器中会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后在显示*/width:100%;
height:100%;
}</style>
</head>
<body>
<div id='banner'>
<!--trueImg是当前标签的自定义属性，存储的是真实图片的地址-->
<img src="" alt="" trueImg="img/jd.jpg">
</div>
<script>var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0]
window.onscroll = function(){if(banner.isLoad){return;
}var A = banner.offsetHeight+utils.offset(banner).top;var B = utils.win("clientHeight") + utils.win("scrollTop");if(A<B){//当条件成立，我们加载真实的图片，第一次加载完成后，我们在让页面滚动的过程中A<B一直成立，又重新执行下面的操作，导致了重复给一个容器中的图片进行加载var oImg = new Image;
oImg.src = imgFir.getAttribute('trueImg');
oImg.onload = function(){
imgFir.src = this.src;
imgFir.style.display = 'block';
oImg = null;
}
banner.isLoad = true;//设置一个自定义属性告诉浏览器我已经把图片加载完了(不管是否正常的加载，只要处理过一次以后都不需要处理了)}
}</script>
</body>
</html> Das obige ist der detaillierte Inhalt vonIdeen zum verzögerten Laden von js und Erklärung zum verzögerten Laden auf dem ersten Bildschirm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!