自動加載
自動加載就是符合某些條件時才加載某些圖片。
現在好多的網站都用到了自動加載圖片技術，比如淘寶，剛打開淘寶時，加載一部分圖片，在你瀏覽的過程中，往下拉再加載一部分圖片，再往下拉的時候再加載一部分圖片。
代碼實現
<style>
*{
box-sizing:border-box;
}
ol,ul{
list-style: none;
margin:0;
padding:0;
}
#list{
max-width:680px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
#list li{
width:calc(33.333333% - 10px);
text-align:center;
}
.oneToOne{
padding-top:100%;
position:relative;
}
.oneToOne img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
.loadMore{
text-align:center;
margin:16px 0;
}
</style>
<body>
<ol id="list">
</ol>
<div class="loadMore">
<button id="loadMoreButton">加載更多</button>
</div>
<script>
var loadingImage = new Image();
loadingImage.src="https://i.loli.net/2017/08/08/5989307b6c87b.gif";
let list = document.querySelector('#list');
for(var i=0;i < 9;i++){
let li = document.createElement('li');
let div = document.createElement('div');
div.className = 'oneToOne';
let image = document.createElement('img');
image.src = '//via.placeholder.com/200x200?text=' + Math.random().toFixed(6);
div.appendChild(image);
let p = document.createElement('p');
p.textContent = `這是第 ${i+1} 段話`;
li.appendChild(div);
li.appendChild(p);
list.appendChild(li)
}
let loadMoreButton = document.querySelector('#loadMoreButton');
let n =1;
let demand = false;
loadMoreButton.onclick = function(){
if(demand){return}
let request = new XMLHttpRequest();
request.open('GET',`./page-${n+1}.json`);
request.onerror = function(){
demand = false
};
request.onload =function(){
demand = false;
n +=1;
let response = request.responseText;
let data = JSON.parse(response);
for(var i=0;i < data.content.length;i++){
let liString = `
<li>
<div class="oneToOne">
<img data-xxx="${data.content[i].url}"> // data-xxx 代指src
</div>
<p>${data.content[i].text}</p>
</li>`;
list.insertAdjacentHTML('beforeend',liString)
}
if(data.hasNextPage === false){
loadMoreButton.disabled = true;
loadMoreButton.textContent ="看完了"
}
};
demand = true;
request.send()
};
window.onscroll = function(){
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var clientHeight = doc.clientHeight;
var viewportOffset = loadMoreButton.getBoundingClientRect();
var buttonTop = viewportOffset.top;
if( buttonTop <= clientHeight){
loadMoreButton.click()
}
}
</script>
</body>
// JSON
{
"content":[
{"url":"http://via.placeholder.com/200x200?text=0.145596","text":"這是第 10 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.186863","text":"這是第 11 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.102256","text":"這是第 12 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.156688","text":"這是第 13 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.120045","text":"這是第 14 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.132079","text":"這是第 15 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.158627","text":"這是第 16 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.132366","text":"這是第 17 段話"},
{"url":"http://via.placeholder.com/200x200?text=0.146998","text":"這是第 18 段話"}
],
"hasNextPage":true
}
順便學習了 Flex 布局，圖片實現等比例縮放。
什么是懶加載
懶加載就是延遲加載圖片或符合某些條件時才加載某些圖片。
懶加載的原理是什么
頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過javascript設置了圖片路徑，瀏覽器才會發送請求。
懶加載的原理就是先在頁面中把所有的圖片統一使用一張占位圖進行占位，把正真的路徑存在元素的“data-xxx”屬性里，要用的時候就取出來，再設置；
懶加載就是在自動加載的基礎上，增加了下面的代碼。
window.onscroll = function(){
var images =document.querySelectorAll('img[data-xxx]');
for (var i=0;i<images.length;i++){
var imagesviewportOffset =images[i] .getBoundingClientRect();
var imagesTop = imagesviewportOffset.top;
if( imagesTop <= clientHeight){
images[i].src = images[i].getAttribute('data-xxx');
images[i].removeAttribute('data-xxx')
}
}
}
什么是預加載
提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染
預加載實現有兩種方法
var loadingImage = new Image();
loadingImage.src="images/big.jpg";
<link rel="prefetch" href="images/big.jpg">
服務器
npm i -g http-server
http-server -c-1
