JavaScript 处理后台动态返回数据的图片延迟加载
🌙
手机阅读
本文目录结构
模拟后台返回的 JSON 数据，动态创建数据；
默认第一篇图片要加载；
剩下的图片，滚到的时候再加载；如果继续滚动，之前加载过的图片，不进行重复加载；
显示出来的图片，逐渐显示出来，透明度不断增加；
滚动 2 屏幕后，出现返回顶部的按钮，并且以匀速向顶部移动；
HTML+CSS 样式如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>处理后台动态返回数据的图片延迟加载</title>
<style type="text/css">
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;}
body, div, ul, li, img, p {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 14px;
}
ul, li {
list-style: none;
}
img {
border: none;
}
html, body {
width: 100%;
}
#con {
margin: 10px 50px;
padding: 10px;
border: 1px dashed #ff0000;
}
#con li {
padding: 5px 0;
border-bottom: 1px dashed #ccc;
overflow: hidden;
}
#con li img {
display: block;
float: left;
width: 250px;
opacity: 0;
filter: alpha(opacity=0);
}
#con li p {
display: block;
float: right;
width: 70%;
line-height: 30px;
font-size: 16px;
}
#top {
display: none;
position: fixed;
right: 5px;
bottom: 10px;
padding: 2px;
width: 36px;
height: 36px;
text-align: center;
font-size: 13px;
border-radius: 5px;
background: #FFF38F;
cursor: pointer;
}
</style>
</head>
<body>
<h3 id="home_top">处理后台动态返回数据的图片延迟加载 - Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a> 博客网址：<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
<p id="home_bottom">学习JavaScript是一件很有趣的事，可以做出很多自豪的小玩意！--broszhu （这个页面是实现原理：<a href="#" target="_blank">点此查看</a>）</p>
<div id="con">
<ul>
</ul>
</div>
<div id="top">回到顶部</div>
</body>
</html>
JavaScript 代码如下：
<script src="js/json.js"></script>
<script src="js/tools.min.js"></script>
<script >
var tool = new Tool;//创建一个DOM库的实例；
var oDiv = document.getElementById("con");
var oUl = oDiv.getElementsByTagName("ul")[0];
var oTop = document.getElementById("top");
//动态引入json数据；
var frg = document.createDocumentFragment();
for (var i = 0; i < data.length; i++) {
var cur = data[i];
var oLi = document.createElement("li");
oLi.innerHTML = "<img src='img/ddd.jpg' trueImg='" + cur.img + "' alt=''/><p>" + cur.txt + "</p>";
frg.appendChild(oLi);
}
oUl.appendChild(frg);
//功能说明
window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片
window.onscroll = loadImg;//当滚动的时候，还要加载之前没有显示的图片，问题：之前加载过的图片存在多次重新的加载的问题
oTop.onclick = toTop;//返回顶部功能；
//需要加载的图片；
function loadImg() {
var winTop = getWin("clientHeight") + getWin("scrollTop");
var images = oUl.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var cur = images[i];
var curTop = tool.offset(cur).top;
var trueImg = cur.getAttribute("trueImg");
if (curTop <= winTop && !cur.isLoad) {
showTrueImg(cur, trueImg);
}
}
//返回顶部出现的时间；
var cH = getWin("clientHeight");
if (!oTop.isMove) {
oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";
}
}
//替换加载图片
function showTrueImg(cur, trueImg) {
var oImg = new Image;
oImg.src = trueImg;
oImg.onload = function () {
cur.src = trueImg;
cur.isLoad = true;
move(cur);
}
}
//
function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
//jQuery-->fadeIn//透明度逐渐显示；
function move(curEle) {
var count = 0;
_move();
function _move() {
window.clearTimeout(curEle.timer);
count += 0.02;
if (count >= 1) {
tool.setCss(curEle, "opacity", 1);
return;
}
tool.setCss(curEle, "opacity", count);
curEle.timer = window.setTimeout(_move, 10);
}
}
//返回顶部；
function toTop() {
this.style.display = "none";
this.isMove = true;
var count = document.body.scrollTop;
var cur = this;
_toTop();
function _toTop() {
window.clearTimeout(cur.timer);
if (count - 200 <= 0) {
document.body.scrollTop = 0;
cur.isMove = false;
return;
}
count -= 200;
document.body.scrollTop = count;
cur.timer = window.setTimeout(_toTop, 10);
}
}
</script>
