메인 영상 오류

여러번 접속할때는 문제가 없으나 처음 접속하는 고객들이 영상이 안나와서 검게만 보인다고 합니다

PC와 모바일 모두 그렇습니다

https://ksaqua.kr/index.php

메인 영상크기가 크고

메인 페이지 비즈니스 탭에 이미지들이 많고

ripples 까지 있어서 로딩이 느리게되면

검은 화면으로 보일 수 있음!

• 메인영상

<div class="main-video">
    <!-- <video id="" playsinline="" autoplay="" muted="muted" loop>
        <source src="images/main/mv.mp4" type="video/mp4">
    </video> -->
		<video playsinline autoplay muted loop data-autoplay>
        <source src="images/main/mv2.mp4" type="video/mp4">
    </video>
</div>

video 속성 data-autoplay추가해주기

풀페이지일 경우에는 “data-autoplay” 추가해줘야함

영상 크기가 너무 크므로 50% 줄여서 영상소스 다시 넣어주기

(화질은 떨어질 수 있음)

• 섹션 비즈니스 - > AJAX 로 처음부터 하면 좋았겠지만

이미 탭메뉴로 작업됨

header.php

<script type="text/javascript" src="/js/lazyload.min.js"></script>	

나스소스에 있음

<a href="/business/business.php?boardid=business&mode=view&idx=<?=$arrTotal["list"][$i][idx]?>&category=<?=$arrTotal["list"][$i][category]?>" title="<?=$arrTotal["list"][$i][subject]?>">
    <div class="thumb"><img src="/uploaded/board/business/<?=$arrTotal["list"][$i][re_name]?>" alt="<?=$arrTotal["list"][$i][subject]?>"></div>
    <div class="tit"><?=$arrTotal["list"][$i][subject]?></div>
</a>

img 태그에

class="lazyload” 추가

링크 태그 data-srcset 추가해줌

index.php 에 스크립트 추가

	$(window).load(function() {
		$('.main-link').ripples({
			resolution: 1000,
			dropRadius: 20, //px
			perturbance: 0.02,
		});
		$('.main-link').ripples('play');
	});

	var lazyLoad = new LazyLoad({
		elements_selector: ".lazyload",
		class_loaded: "lazyloaded",
		threshold: 400,
		load_delay: 100
	});
</script>
<style>
img.lazyload {opacity:0; transition:.4s;}
img.lazyloaded {opacity:1;}
</style>

참고파일 소스 :

lazyload 소스

풀페이지 나스

file:///Z:/%E2%98%86jQuery%20Plugin%E2%98%86/[Scroll]%20fullPage.js-master/examples/backgroundVideo.html