web前端
1. 懒加载
-
1、不加载全部图片
-
2、首先显示在页面中的图，首先进行加载
-
3、当屏幕发生滚动的时候，判断图片是否进入用户视野，来决定图片是否加载
-
加载步骤
1、首先，不要将图片地址放到src中属性中，而是放到其它属性（data-original）中； 2、页面加载完成后，根据offsetTop判断图片是否在用户视野内，如果在，则将data-original属性的值取出放到src中； 3、在屏幕滚动事件中，重复判断图片是否进入视野，如果进入则将data-original属性中的值取出放到src中。 ---------- 插件 $('img').lazyload({ effect:'fadeIn'; }); 注意：设置高度 -
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<script src="js/jquery-3.1.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container{
width: 1000px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
section{
border: 1px solid red;
border-radius: 5px;
overflow: hidden;
background-color: #93ECDE;
width: 49%;
margin-top: 2%;
}
section img{
width: 100%;
}
section p{
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
var container = document.getElementById('container');
$.get('http://localhost:3000/data/data1.json',function (data){
var data = data.scenery;
for(let item of data){
$(`
<section>
<img src="imgs/placeholder.png" data-origin="${item.img_url}" alt="">
<p>${item.title}</p>
</section>
`).appendTo(container);
}
initImg();
});
var innerHeight = $(window).height();
function initImg(){
$('section img').each(function (index,elem){
var $this = $(this);
this.onload = function (){
var top = $this.offset().top;
if(top < innerHeight){
$this.attr('src',$this.attr('data-origin'));
}
}
})
};
window.onscroll = function (){
var pHeight = innerHeight + $(window).scrollTop();
$('section img').each(function (index,elem){
if($(this).offset().top < pHeight){
$(this).attr('src',$(this).attr('data-origin'));
}
})
}
</script>
</body>
</html>
2. 预加载
- 预加载是等待服务器获取数据完成后在在页面显示
- 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预加载</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 60%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
display: none;
}
section{
border: 1px solid red;
border-radius: 5px;
overflow: hidden;
background-color: #93ECDE;
width: 49%;
margin-top: 2%;
}
section img{
width: 100%;
height: 300px;
}
section p{
text-align: center;
padding: 10px 0;
}
.prog{
width: 500px;
height: 5px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 2.5px;
border: 1px solid blue;
overflow: hidden;
}
.prog p{
height: 5px;
width: 0;
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="prog">
<p></p>
</div>
<script>
var arrImg = {};
var times = 0;
$.get('http://localhost:3000/data/data1.json',function (data){
var data = data.scenery;
for (var p in data){
$(`
<section>
<p>${data[p].title}</p>
</section>
`).appendTo('.container');
times++;
}
cj(data);
})
function cj(data){
for(var p in data){
var img = new Image();
img.src = data[p].img_url;
arrImg[data[p].img_url] = img;
// console.log(img);
var n = 0;
img.onload = function (){
n++;
//进度条
var v = (n / times)*100;
progress(v);
if(n == times){
append();
}
}
}
}
function progress(v){
console.log(v + "%");
$('.prog p').css('width',v*5+'px');
setTimeout(function (){
if(v == 100){
$('.prog').css('display','none');
$('.container').css('display','block');
}
},100)
}
function append(){
var i=0;
for(var p in arrImg){
$('section').eq(i).prepend(arrImg[p]);
i++;
}
}
</script>
</body>
</html>
网友评论