Scenario 1
We often use download software to download TV series, a TV series can have N episodes.
1. Download all the episodes first and then watch them happily. Are you really happy? 2. We go to the next episode, then we watch it, then we go to the next episode, then we watch it again. 3. Let's download the first episode, and then download the following content when watching the first episode. In this way, we can finish the following content while watching the previous content, saving a lot of timeCopy the codeSo that brings us to today’s question: If you have a slide and the slide has 1000 images do you want to load 1000 images when the web page is initialized? Without preloading, 1000 IMG tags will be generated immediately in the page, the browser will consume performance when it receives the HTML file and converts it into a DOM tree, and it will generate 1000 HTTP requests concurrently, which will definitely block bandwidth. One way to do this is to load the first image as soon as the page opens, and then load the rest of the page while the user is looking at it,
So we must have a tool (Thunderbolt) -> Image object
The Image usage
let oImage = new Image()
It has three properties
SRC: when we give the Image object SRC attribute assignment a url, the Image object loads the url resources, after the completion of the loading of the resources are stored in the browser’s cache folder, next time if we are going to call the url address directly from the cache folder read, so quickly.
Onload: triggered when the resource is loaded. ‘onError: triggered when the resource fails to load
Preloaded demo of images
<! DOCTYPEHTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image preloading</title>
<script>
window.onload = function () {
var oImg = document.getElementById('img1');
var oImage = new Image();
var arr = [
'http://d.hiphotos.baidu.com/image/w%3D2048/sign=2846dc1369600c33f079d9c82e74500f/a044ad345982b2b7938726c333adcbef76099b 98.jpg'.'http://f.hiphotos.baidu.com/image/w%3D2048/sign=2da141ad013b5bb5bed727fe02ebd439/7dd98d1001e9390124aacd3879ec54e736d196 0f.jpg'.'http://g.hiphotos.baidu.com/image/w%3D2048/sign=5e067f12a918972ba33a07cad2f57b89/b8014a90f603738d27674f24b11bb051f819ec 83.jpg'.'http://f.hiphotos.baidu.com/image/w%3D2048/sign=fc9023a7d343ad4ba62e41c0b63a5baf/4bed2e738bd4b31ca2a24ab985d6277f9e2ff8 12.jpg'.'http://f.hiphotos.baidu.com/image/w%3D2048/sign=99191869cebf6c81f7372be88806b035/9345d688d43f8794a159b42fd01b0ef41bd53a 08.jpg'.'http://a.hiphotos.baidu.com/image/w%3D2048/sign=4aaddd39718da9774e2f812b8469f919/8b13632762d0f70391b28bd60afa513d2697c5 b3.jpg'.'http://g.hiphotos.baidu.com/image/w%3D2048/sign=50df8b2efffaaf5184e386bfb86c95ee/fc1f4134970a304ebbdb83f2d3c8a786c9175c 38.jpg'
];
var iCur = 0;
var i = 0;
xunlei();
oImg.onclick = function () {
i++;
if(i < arr.length) { oImg.src = arr[i]; }}function xunlei() {
oImage.src = arr[iCur];
oImage.onload = function () {
iCur++;
if (iCur < arr.length) {
xunlei(); / / recursion
}
document.title = iCur + '/'+ arr.length; }}}</script>
</head>
<body>
<img src="http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d01632 0e.jpg"
id="img1" style="width: 300px;" />
</body>
</html>
Copy the codeScenario 2
For example, when we load more images, which tag appears in the viewable area means that the user wants to see it. If we only load images in the viewable area, how can we determine which img tag is in the viewable area?
The complete code is
<! DOCTYPEHTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Images are loaded on demand</title>
<style>
#ul1 {
margin: 100px auto 0;
padding: 0;
}
li {
float: left;
margin: 0 0 10px 10px;
list-style: none;
border: 1px solid black;
}
img {
width: 290px;
height: 200px;
display: block;
}
</style>
<script>
window.onload = function () {
var oUl = document.getElementById('ul1');
var aImg = oUl.getElementsByTagName('img');
showImage();
window.onscroll = showImage;
function showImage() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < aImg.length; i++) {
if(! aImg[i].isLoad && getTop(aImg[i]) < scrollTop +document.documentElement.clientHeight) {
aImg[i].src = aImg[i].getAttribute('_src');
aImg[i].isLoad = true; }}}function getTop(obj) {
var iTop = 0;
while (obj) {
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
returniTop; }}</script>
</head>
<body>
<ul id="ul1">
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
<li><img _src="img/1.jpg" src="img/white.JPG" /></li>
<li><img _src="img/2.jpg" src="img/white.JPG" /></li>
<li><img _src="img/3.jpg" src="img/white.JPG" /></li>
<li><img _src="img/4.jpg" src="img/white.JPG" /></li>
<li><img _src="img/5.jpg" src="img/white.JPG" /></li>
<li><img _src="img/6.jpg" src="img/white.JPG" /></li>
<li><img _src="img/7.jpg" src="img/white.JPG" /></li>
</ul>
</body>
</html>
Copy the codeOf course this way is not the most optimal solution above Because every time when scrolling the judgement for loop, consider the following, if there are 1000 images, will loop 1000 times, the amount of calculation is actually pretty big, another way is to create an array, the array is stored inside need to load images, each play a load, is deleted from the array. So if I load one array, I have one less array, and when I load all of them, the array is zero, and I don’t go through the loop.