圖片預(yù)加載
圖片預(yù)加載是為了解決網(wǎng)絡(luò)卡等一些其他情況造成該顯示的圖片不能及時的顯示，但為了提高網(wǎng)頁的完整性，給未能及時加載出來的圖片添加一個圖標(biāo)告訴用戶正在加載圖片。
window.onload=function(){
//使用閉包函數(shù)
var imgObj=(function(){
//創(chuàng)建一個img對象，利用該對象幫程序請求正式的圖片
var imgObject=new Image();
//創(chuàng)建一個img標(biāo)簽，用來展示圖片
var imgTag=document.createElement('img');
//把imgTag拼接進(jìn)文檔流
document.body.appendChild(imgTag);
//當(dāng)imgObject把圖片下載完畢時，會觸發(fā)該對象的load事件，在這個事件中，
//把imgTag展示的占位圖片替換為正式圖片
imgObject.onload=function(){
imgTag.src=this.src;
}
return {
src:function(src){
//給圖片標(biāo)簽設(shè)置占位圖
imgTag.src='http://ww1.sinaimg.cn/mw1024/64eeab82gw1f9bjahlklaj203k03kmwy.jpg';
//給圖片標(biāo)簽設(shè)置正式圖
imgObject.src=src;
}
}
})();
imgObj.src('http://img10.360buyimg.com/n1/s450x450_jfs/t3079/22/1186487500/120409/d87f6ab7/57c7c23fNec4956f3.jpg');
}
瀑布流+圖片預(yù)加載
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花瓣網(wǎng)瀑布流</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 250px;
float: left;
margin: 0 5px;
}
ul>li {
margin-bottom: 10px;
width: 250px;
}
#flow {
width: 1100px;
margin: 20px auto;
}
#flow:after {
content: "";
display: block;
clear: both;
}
</style>
<script type="text/javascript">
/*
* 隨機圖片接口：https://unsplash.it/300/800/?random
* 參數(shù)：300：表示圖片的寬度
* 參數(shù)：800：表示圖片的高度
*/
</script>
</head>
<body>
<!-- 瀑布流容器 -->
<div id="flow">
<!-- 四列瀑布流 -->
<ul id="list1"></ul>
<ul id="list2"></ul>
<ul id="list3"></ul>
<ul id="list4"></ul>
</div>
</body>
<script type="text/javascript">
// 頁面加載完畢后，觸發(fā)加載圖片事件
window.onload = function() {
// 先定一個小目標(biāo)：創(chuàng)建20個圖片
createNimg(20);
}
// 頁面滾動高度大于最短一列圖片高度，繼續(xù)加載新圖片
window.onscroll = function() {
// 獲取所有的ul
var ulArr = document.getElementsByTagName('ul');
// 拿到最短一列下標(biāo)
var minIndex = getMinHeight(ulArr);
// 獲取當(dāng)前頁面滾動高度
var h = clientH() + scrollY();
// 頁面高度大于最短一列高度，繼續(xù)添加新圖片
if(ulArr[minIndex].offsetHeight < h) {
createNimg(20);
}
}
// 循環(huán)創(chuàng)建N個圖片
function createNimg(n) {
for(var i = 0; i < n; i++) {
appendImg();
}
}
// 向最短的ul中拼圖片
function appendImg() {
// 獲取所有的ul
var ulArr = document.getElementsByTagName('ul');
// 拿到最短的ul下標(biāo)
var minIndex = getMinHeight(ulArr);
// 創(chuàng)建Li
var li = document.createElement('li');
// 獲取圖片
var imgTag = createImg();
// 圖片進(jìn)li
li.appendChild(imgTag);
// li進(jìn)ul
ulArr[minIndex].appendChild(li);
}
// 獲取最短的一列ul下標(biāo)
function getMinHeight(ulArr) {
var minUl = 0;
for(var i = 0; i < ulArr.length; i++) {
if(ulArr[i].offsetHeight < ulArr[minUl].offsetHeight) {
minUl = i;
}
}
return minUl;
}
// 創(chuàng)建圖片及其所屬相關(guān)標(biāo)簽的函數(shù)
function createImg() {
// 通過隨機數(shù)函數(shù)確定圖片的高度
h = random(400, 800);
var imgObj = (function() {
//創(chuàng)建一個img對象，利用該對象幫程序請求正式的圖片
var imgObject = new Image();
//創(chuàng)建一個img標(biāo)簽，用來展示圖片
var imgTag = document.createElement('img');
imgTag.style.width = '250px';
imgTag.style.height = h + 'px';
//當(dāng)imgObject把圖片下載完畢時，會觸發(fā)該對象的load事件，在這個事件中，
//把imgTag展示的占位圖片替換為正式圖片
imgObject.onload = function() {
imgTag.src = this.src;
}
return {
src: function(src) {
//給圖片標(biāo)簽設(shè)置占位圖
imgTag.src = 'http://ww1.sinaimg.cn/mw1024/64eeab82gw1f9bjahlklaj203k03kmwy.jpg';
//給圖片標(biāo)簽設(shè)置正式圖
imgObject.src = src;
},
imgs:imgTag
}
})();
imgObj.src('https://unsplash.it/250/' + h + '/?random');
var img=imgObj.imgs;
return img;
}
/*工具類函數(shù)庫*/
// 隨機數(shù)函數(shù)
function random(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
function clientH() { //獲取可視區(qū)高度
return window.innerHeight || document.documentElement.clientHeight;
}
function scrollY() { //獲取滾動條高度
return document.body.scrollTop || document.documentElement.scrollTop;
}
</script>
</html>
