js 이미지 로딩의 두 가지 효과에 대한 예제 코드
- 零下一度원래의
- 2017-05-15 09:47:281612검색
이번 글에서는 js그림 로딩 효과 예시 코드(지연 로딩 + 워터폴 로딩)를 주로 소개하는데, 실용성이 좋은 친구들이 참고하면 좋습니다. 🎜>
이미지 로딩 효과는 주로 두 가지로 합니다
지연 로딩
- HTML의
img 태그 , src 속성에 올바른 주소를 저장하고, 모든 이미지에 대해 순환 로딩 이미지를 배경으로 설정
- js하고, 각 img를 차례로 읽고, src의 주소를 바꿉니다. src로 이동하여 배경 제거
- 이미지가 성공적으로 로드될 때마다 진행률 표시줄의 비율이 그에 따라 변경됩니다.
- 로딩에 실패하면 이미지 로딩 오류가 발생합니다.
<body>
<p class="picList">
<img class="lazy" src="pic/compressed/picList1.jg">
<img class="lazy" src="pic/compressed/picList2.jpg">
<img class="lazy" src="pic/compressed/picList3.jpg">
<img class="lazy" src="pic/compressed/picList4.jpg">
<img class="lazy" src="pic/compressed/picList5.jpg">
<img class="lazy" src="pic/compressed/picList6.jpg">
<img class="lazy" src="pic/compressed/picList7.jpg">
<img class="lazy" src="pic/compressed/picList8.jpg">
<img class="lazy" src="pic/compressed/picList9.jpg">
<img class="lazy" src="pic/compressed/picList10.jpg">
</p>
<p id="loadBar">
<p id="loadBarMask"></p>
</p>
</body>css(scss 을 사용하면 컴파일 시 다양한 호환 접두사가 자동으로 추가됩니다.) .picList{
img{
width: 100px;
height: 100px;
position: relative;
/*加载失败时显示灰底文字*/
&:after{
content: "( ⊙ o ⊙ )加载失败";
font-size: 6px;
font-family: FontAwesome;
color: rgb(100, 100, 100);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ddd;
}
}
}
.lazy{
background: url(../pic/loading.gif) center no-repeat;
border: 1px solid black;
}
#loadBar{
width: 200px;
height: 15px;
background: linear-gradient(90deg,#187103,#81b50b,#187103);
border: 10px solid white;
position: absolute;
top: 150px;
left: 50%;
margin-left: -100px;
#loadBarMask{
width: 70%;//这个数值显示没有加载成功的图片
height: 100%;
background-color: beige;
position: absolute;
right: 0;
}
}CSS에서 주의할 점은 두 가지입니다.
- 이미지가 로드될 때 하나가 표시됩니다. 회색 배경 텍스트가 img의 after
의사 클래스 에 배치되었습니다. 이미지 로딩에 실패하고 배경 gif 이미지가 제거되면 이 부분의 내용과 스타일이 표시됩니다.
- 하나는 진행률 표시줄의 스타일입니다. 쓰기는 매우 간단하며 주로 그라데이션이 있는 녹색 레이어와 흰색 레이어가 함께 쌓여 있습니다. 녹색은 로드됨을 의미하고 흰색은 로드되지 않음을 의미합니다. 표시할 때 흰색 레이어의 너비를 직접 제어하면 됩니다.
var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');
var activePic = 0;
var totalPic = lazyPic.length;
/*每秒加载一张图片*/
function loadPicPerSecond(){
lazyPic.each(function(index){
var self = $(this);
//console.log(self[0].complete);
/*img标签已经事先写在html中，所以此时的complete状态全部都是true*/
setTimeout(function(){
src[index] = self.attr('src');
self.attr('src',src[index]);
self.removeClass('lazy');
//图片获得正确src地址之后，可以执行下面的onload操作
self[0].onload = function(){
//加载读条loadBar动画
countPic();
}
//图片获得的src地址不正确时，执行下面的onerror操作
self[0].onerror = function(){
/*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
countPic();
}
},1000*index);
})
}
/*根据onload的执行情况来计算当前的图片加载进度.每onload一次，activePic就增加1*/
function countPic(){
activePic++;
var leftPic = totalPic - activePic;
var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比配合
console.log("已加载"+(100-percentPic)+"%");
loadBarMask.css("width",percentPic+"%");
if(percentPic==0){
$('#loadBar').hide();
}
}
두 번째 워터폴 로딩
- 창 스크롤을 모니터링하여 마지막으로 로드된 사진이 창에 들어가려고 할 때 다음 사진 로드를 시작합니다.
- 모든 이미지 주소가
json 데이터에 이미 존재한다고 가정하고 매번 10개의 이미지 주소를 읽어 로드한 후 기존 Waterfall 흐름 끝에 삽입합니다.
- 모든 이미지가 로드될 때까지 반복합니다.
var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');
var scrollTop,
clientHeight,
scrollHeight;
var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片
var src = [];
var activePic = 0;
var totalPic = lazyPic.length;
//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
dirtSrc + "20.jpg",
dirtSrc + "21.jpg",
dirtSrc + "22.jpg",
dirtSrc + "23.jpg",
dirtSrc + "24.jpg",
dirtSrc + "25.jpg",
dirtSrc + "26.jpg",
dirtSrc + "27.jpg",
dirtSrc + "28.jpg",
dirtSrc + "29.jpg",
dirtSrc + "30.jpg",
dirtSrc + "31.jpg",
dirtSrc + "32.jpg",
dirtSrc + "33.jpg",
dirtSrc + "34.jpg",
dirtSrc + "35.jpg",
dirtSrc + "36.jpg",
dirtSrc + "37.jpg",
dirtSrc + "38.jpg",
dirtSrc + "39.jpg",
dirtSrc + "40.jpg",
dirtSrc + "41.jpg",
dirtSrc + "42.jpg",
dirtSrc + "43.jpg",
dirtSrc + "44.jpg",
dirtSrc + "45.jpg",
dirtSrc + "46.jpg",
dirtSrc + "47.jpg",
dirtSrc + "48.jpg",
dirtSrc + "49.jpg",
]};
//加载次数计数器
var scrollIndex = 0;
$(function(){
/*监听窗口滚动情况*/
$(window).on('scroll',function(){
scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
clientHeight = $(window).height();
scrollHeight = picList.last().height();//picList.last()[0].clientHeight
/*目标与窗口的距离达到阈值时开始加载*/
if(scrollHeight-clientHeight-scrollTop < threshold){
scrollPic(10);
}
})
})
/*根据滚动程度加载图片，每次加载perAmount张*/
function scrollPic(perAmount = 10){
var totalAmount = perAmount * (scrollIndex+1);
//考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值
if(totalAmount>picData.imgSrc.length){
totalAmount = picData.imgSrc.length;
}
for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
var oimg = new Image();
oimg.src = picData.imgSrc[scrollIndex];
picList.append(oimg);
}
}더 중요한 것은 scrollTop과 heightobject의 값이 항상 기억나지 않으니 js와 를 따라가세요. >jquery 는 모두 적어두고 나중에 바로 사용할 수 있습니다. 수치 관계를 파악한 후 조건이 충족되면 로딩이 트리거될 수 있습니다.
【관련 추천】특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드
2.무료 js 온라인 동영상 튜토리얼3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 js 이미지 로딩의 두 가지 효과에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.