图片预加载
图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示，但为了提高网页的完整性，给未能及时加载出来的图片添加一个图标告诉用户正在加载图片。
window.onload=function(){
//使用闭包函数
var imgObj=(function(){
//创建一个img对象，利用该对象帮程序请求正式的图片
var imgObject=new Image();
//创建一个img标签，用来展示图片
var imgTag=document.createElement('img');
//把imgTag拼接进文档流
document.body.appendChild(imgTag);
//当imgObject把图片下载完毕时，会触发该对象的load事件，在这个事件中，
//把imgTag展示的占位图片替换为正式图片
imgObject.onload=function(){
imgTag.src=this.src;
}
return {
src:function(src){
//给图片标签设置占位图
imgTag.src='http://ww1.sinaimg.cn/mw1024/64eeab82gw1f9bjahlklaj203k03kmwy.jpg';
//给图片标签设置正式图
imgObject.src=src;
}
}
})();
imgObj.src('http://img10.360buyimg.com/n1/s450x450_jfs/t3079/22/1186487500/120409/d87f6ab7/57c7c23fNec4956f3.jpg');
}
瀑布流+图片预加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花瓣网瀑布流</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
* 参数：300：表示图片的宽度
* 参数：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">
// 页面加载完毕后，触发加载图片事件
window.onload = function() {
// 先定一个小目标：创建20个图片
createNimg(20);
}
// 页面滚动高度大于最短一列图片高度，继续加载新图片
window.onscroll = function() {
// 获取所有的ul
var ulArr = document.getElementsByTagName('ul');
// 拿到最短一列下标
var minIndex = getMinHeight(ulArr);
// 获取当前页面滚动高度
var h = clientH() + scrollY();
// 页面高度大于最短一列高度，继续添加新图片
if(ulArr[minIndex].offsetHeight < h) {
createNimg(20);
}
}
// 循环创建N个图片
function createNimg(n) {
for(var i = 0; i < n; i++) {
appendImg();
}
}
// 向最短的ul中拼图片
function appendImg() {
// 获取所有的ul
var ulArr = document.getElementsByTagName('ul');
// 拿到最短的ul下标
var minIndex = getMinHeight(ulArr);
// 创建Li
var li = document.createElement('li');
// 获取图片
var imgTag = createImg();
// 图片进li
li.appendChild(imgTag);
// li进ul
ulArr[minIndex].appendChild(li);
}
// 获取最短的一列ul下标
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;
}
// 创建图片及其所属相关标签的函数
function createImg() {
// 通过随机数函数确定图片的高度
h = random(400, 800);
var imgObj = (function() {
//创建一个img对象，利用该对象帮程序请求正式的图片
var imgObject = new Image();
//创建一个img标签，用来展示图片
var imgTag = document.createElement('img');
imgTag.style.width = '250px';
imgTag.style.height = h + 'px';
//当imgObject把图片下载完毕时，会触发该对象的load事件，在这个事件中，
//把imgTag展示的占位图片替换为正式图片
imgObject.onload = function() {
imgTag.src = this.src;
}
return {
src: function(src) {
//给图片标签设置占位图
imgTag.src = 'http://ww1.sinaimg.cn/mw1024/64eeab82gw1f9bjahlklaj203k03kmwy.jpg';
//给图片标签设置正式图
imgObject.src = src;
},
imgs:imgTag
}
})();
imgObj.src('https://unsplash.it/250/' + h + '/?random');
var img=imgObj.imgs;
return img;
}
/*工具类函数库*/
// 随机数函数
function random(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
function clientH() { //获取可视区高度
return window.innerHeight || document.documentElement.clientHeight;
}
function scrollY() { //获取滚动条高度
return document.body.scrollTop || document.documentElement.scrollTop;
}
</script>
</html>
网友评论