이번 글에서는 js그림 로딩 효과 예시 코드(지연 로딩 + 워터폴 로딩)를 주로 소개하는데, 실용성이 좋은 친구들이 참고하면 좋습니다. 🎜>
이미지 로딩 효과는 주로 두 가지로 합니다
하나는 페이지에 이미지가 많을 때 읽기 효과가 있는 로딩 프롬프트를 제공하는 것입니다(올바른 로딩을 확인하기 위해 1초는 로딩 간격은 1시간으로 설정)
다른 하나는 슬라이더의 위치에 따라 이미지를 미리 로드하여 사용자가 눈치채지 못하게 폭포수 흐름의 로딩 효과를 얻는 것입니다
지연 로딩
주요 아이디어:
- HTML의
img 태그 , src 속성에 올바른 주소를 저장하고, 모든 이미지에 대해 순환 로딩 이미지를 배경으로 설정
- js하고, 각 img를 차례로 읽고, src의 주소를 바꿉니다. src로 이동하여 배경 제거
- 이미지가 성공적으로 로드될 때마다 진행률 표시줄의 비율이 그에 따라 변경됩니다.
- 로딩에 실패하면 이미지 로딩 오류가 발생합니다.
HTML 구조는 매우 간단합니다. 즉, p.picList가 모든 img를 래핑한 다음 간단한 진행률 표시줄을 추가합니다. p#loadBar
<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 이미지가 제거되면 이 부분의 내용과 스타일이 표시됩니다.
- 하나는 진행률 표시줄의 스타일입니다. 쓰기는 매우 간단하며 주로 그라데이션이 있는 녹색 레이어와 흰색 레이어가 함께 쌓여 있습니다. 녹색은 로드됨을 의미하고 흰색은 로드되지 않음을 의미합니다. 표시할 때 흰색 레이어의 너비를 직접 제어하면 됩니다.
js 부분(loadPicPerSecond() 직접 실행)
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 흐름 끝에 삽입합니다.
- 모든 이미지가 로드될 때까지 반복합니다.
HTML은 앞선 부분과 동일하며 src를 일반 주소로 적으면 됩니다. CSS는 완전히 동일합니다.
js 부분
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과 height
object의 값이 항상 기억나지 않으니 js와 를 따라가세요. >jquery 는 모두 적어두고 나중에 바로 사용할 수 있습니다. 수치 관계를 파악한 후 조건이 충족되면 로딩이 트리거될 수 있습니다.
【관련 추천】
1.
특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드
2.
무료 js 온라인 동영상 튜토리얼3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 js 이미지 로딩의 두 가지 효과에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
