php 懒加载实现6,07-15作业：懒加载的实现原理，选项卡的实现原理

1.懒加载的代码实例演示

html>

懒加载代码实例演示

    

    

    

    

    

    

.

.

var container = document.createElement('div');

var frag = document.createDocumentFragment();

for (var i = 1; i <= 16; i++) {

var imgUrl = 'http://cdn.jirengu.com/book.jirengu.com/img/' + i + '.jpg';

var img = document.createElement('img');

img.setAttribute('src', 'http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif');

img.setAttribute('data-src', imgUrl);

img.setAttribute('style', 'width:600px;height:350px;margin: 5px;');

frag.appendChild(img);

}

container.appendChild(frag);

document.body.insertBefore(container, document.body.firstElementChild);

window.addEventListener('scroll',  lazyLoaded, false);

function lazyLoaded() {

var scrollTop = document.documentElement.scrollTop;

var clientHeight = document.documentElement.clientHeight;

var imgArr = Array.prototype.slice.call(document.images, 0);

imgArr.forEach(function (img) {

if (img.offsetTop <= (scrollTop + clientHeight)) {

img.setAttribute('src', img.dataset.src);

}

});

}

window.addEventListener('load', lazyLoaded, false);

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.选项卡的实现 并代码实例演示

选项卡

ul,li {

margin: 0;

padding: 0;

list-style: none;

}

a {

text-decoration: none;

}

a:hover {

text-decoration-color: red;

text-decoration-line: underline;

}

.tab-container {

width: 300px;

height: 200px;

}

.tab-nav {

overflow: hidden;

}

.tab-nav ul li {

float: left;

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

cursor: pointer;

}

.active {

background-color: lightcoral;

}

.tab-content .detail{

line-height: 30px;

min-height: 200px;

padding-top: 10px;

display: none;

}

.detail.active {

display: block;

}

• 选项卡1
• 选项卡2
• 选项卡3

• 1.皑如山上雪，皎若云间月。
• 2.闻君有两意，故来相决绝。
• 3.今日斗酒会，明旦沟水头

• 01.躞蹀御沟上，沟水东西流。
• 02.凄凄复凄凄，嫁娶不须啼。
• 03.愿得一心人，白头不相离。

• 001.竹竿何袅袅，鱼尾何簁簁！
• 002.男儿重意气，何用钱刀为！
• 003.出自两汉卓文君的《白头吟》

var tabNav = document.getElementsByClassName('tab-nav').item(0);

var tabList = tabNav.firstElementChild.children;

var tabArr = Array.prototype.slice.call(tabList, 0);

var detail = document.getElementsByClassName('detail');

var detailArr = Array.prototype.slice.call(detail, 0);

tabNav.addEventListener('click', showDetail, false);

function showDetail(evt) {

tabArr.forEach(function (tab) { tab.classList.remove('active') });

evt.target.classList.add('active');

detailArr.forEach(function (detail) {detail.classList.remove('active')});

detailArr.forEach(function (detail) {

if (detail.dataset.index === evt.target.dataset.index) {

detail.classList.add('active');

}

});

}