js实现多张图片延迟加载效果
更新时间：2017年07月17日 16:50:40 作者：diasa
这篇文章主要为大家详细介绍了js实现多张图片延迟加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现多张图片延迟加载效果的具体代码，供大家参考，具体内容如下
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--做移动端响应式必须加的样式-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
ul,li{
list-style:none;
}
img{
display:block;
border:none;
}
/*
最外层容器不设定宽高的
*/
.news{
padding:10px;
}
.news li{
height:60px;
padding:10px 0;
border-bottom:1px solid #dedede;
position:relative;
}
.news li > div:nth-child(1){
position:absolute;
top:10px;
left:0;
width:75px;
height:60px;
background:url('img/default.png') no-repeat center center;
background-size:100% 100%;/*设置背景图片大小*/
}
.news li > div:nth-child(1) img{
width:100%;
height:100%;
display:none;
opacity:0;
}
.news li > div:nth-child(2){
height:60px;
margin-left:80px;
}
.news li > div:nth-child(2) h2{
height:20px;
line-height:20px;
/*实现文字超出隐藏*/
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.news li > div:nth-child(2) p{
line-height:20px;
font-size:12px;
color:#ccc;
}
</style>
</head>
<body>
<ul id='news' class='news'>
<li>
<div>
<img src="" alt="">
</div>
<div>
<h2>我是一个标题</h2>
<p>我是内容</p>
</div>
</li>
</ul>
<script>
var news = document.getElementById('news')
var imgList = news.getElementsByTagName('img')
//1、获取需要绑定的数据（Ajax）
var jsonData = null;
~function(){
var xhr = new XMLHttpRequest();
//URL地址后面加的随机数是在清除每一次请求数据时候（GET请求）产生的缓存
xhr.open('GET','data.json?_='+Math.random(),false)
xhr.onreadystatechange = function(){
if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
var val = xhr.responseText;
jsonData = utils.formatJSON(val)
}
}
xhr.send(null)
}()
//2、数据绑定->把jsonData存储的数据绑定到页面中（字符串拼接）
~function(){
var str = '';
if(jsonData){
for(var i = 0,len = jsonData.length;i<len;i++){
var curData = jsonData[i]
str+='<li>';
str+='<div><img src="" trueImg="'+curData['img']+'"></div>';
str+='<div>';
str+='<h2>'+curData['title']+'</h2>';
str+='<p>'+curData['desc']+'</p>';
str+='</div>';
str+='</li>';
}
}
news.innerHTML = str;
}()
//3、图片延迟加载
//我先编写一个方法实现单张图片的延迟加载
function lazyImg(curImg){
var oImg = new Image;
oImg.src = curImg.getAttribute('trueImg');
oImg.onload = function(){
curImg.src = this.src;
curImg.style.display = "block";
fadeIn(curImg)
oImg = null
};
curImg.isLoad = true;
}
function fadeIn(curImg){
var duration = 500,interval = 10,target = 1;
var step = (target/duration)*interval;
var timer = window.setInterval(function(){
var curOP = utils.getCss(curImg,'opacity');
if(curOP>1){
curImg.style.opacity = 1;
window.clearInterval(timer)
return
}
curOP+=step;
curImg.style.opacity = curOP;
},interval)
}
function handleAllImage(){
for(var i = 0,len = imgList.length;i<len;i++){
var curImg = imgList[i];
//当前的图片处理过了就不需要在重新的进行处理了
if(curImg.isLoad = true){
continue;
}
//只有A小于B的时候才进行处理,当前图片是隐藏的，我们其实计算的是它父节点的A
var curImgPar = curImg.parentNode;
var A = utils.offset(curImgPar).top + curImgPar.offsetHeight;
var B = utils.win('clientHeight')+utils.win('scrollTop');
if(A<B){
lazyImg(curImg);
}
}
}
//4、开始的时候一秒加载第一屏的图片，当滚动条滚动的时候，再加载剩余的图片
window.setTimeout(handleAllImage,1000);
window.onscroll = handleAllImage;
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解redux异步操作实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
下面小编就为大家带来一篇详谈commonjs模块与es6模块的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
我们都知道,axios 是是一个跨平台请求方案,在浏览器端采用 XMLHttpRequest API 进行封装,而在 Node.js 端则采用 http/https 模块进行封装,那么本文,我们将来探讨这个话题：axios 的跨端架构是如何实现的,需要的朋友可以参考下2024-04-04
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
这篇文章主要为大家分享一款所见即所得的富文本编辑器bootstrap-wysiwyg，并详细告诉大家文本编辑器bootstrap-wysiwyg的使用方法，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要给大家介绍了关于JavaScript练习小项目之修改div块的颜色的相关资料,文中通过举例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了js canvas实现简单的图像扩散效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
微信小程序授权登录实现方案wx.getUserProfile(2022年最新版)
微信在最近开始要求使用wx.getUserProfile()来获取用户的昵称,头像等信息,所以下面这篇文章主要给大家介绍了关于2022年最新版微信小程序授权登录实现方案wx.getUserProfile的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了js实现div层缓慢收缩与展开的方法,通过javascript自定义函数实现div层的收缩与展开效果,非常具有实用价值,需要的朋友可以参考下2015-05-05
匿名函数就是没有实际名字的函数，javaScript的匿名函数形式多样，下面就一一为大家罗列出来2014-08-08
这篇文章主要介绍了Window.Open打开窗体和if嵌套代码的相关资料,需要的朋友可以参考下2016-04-04
最新评论