/*




*/


// 이미지를 화면 스코롤에 맞게 느리게 로드하기위한 처리
// 이미 캐시된 이미지가 있다면 바로 로드하도록 기능추가
// 화면언어가 한국어인 경우에도 바로 로드처리?
// Determine the images to be lazy loaded
//const lazyImages = document.querySelectorAll('img[data-src]');

/* 바로 즉시 이미지를 로딩처리하려면 */
/*
if('0'==1){
	document.querySelectorAll('img[data-src]').forEach(function(img) {
	  load(img);
	});

}else{

*/



// Check for Cache support
if (window.caches) {
  const lazyImages = Array.prototype.slice.call(document.querySelectorAll('img[data-src]'));

  Promise.all(lazyImages.map(img => {
    const src = img.getAttribute('data-src');

    // Check if response for this image is cached
    return window.caches.match(src).
    then(response => {
      if (response) {
        // The image is cached - load it
          img.setAttribute('src', src);
          img.setAttribute('alt', img.getAttribute('data-alt'));
          img.removeAttribute('data-src');
          img.removeAttribute('data-alt');
      }
    })
  })).
  then(initialiseLazyLoading); // finished loads from cache, lazy load others

} else if('0'=='1'){
	
	const lazyImages = Array.prototype.slice.call(document.querySelectorAll('img[data-src]'));

	Promise.all(lazyImages.map(img => {
		const src = img.getAttribute('data-src');
			// The image is cached - load it
			img.setAttribute('src', src);
			img.setAttribute('alt', img.getAttribute('data-alt'));
			img.removeAttribute('data-src');
			img.removeAttribute('data-alt');

		})).then(initialiseLazyLoading); // finished loads from cache, lazy load others



} else {
  // cache not supported - lazy load all
  initialiseLazyLoading();
}

//}

function initialiseLazyLoading() {
	// Determine the images to be lazy loaded
	//const lazyImages = document.querySelectorAll('img[data-src]');

	const options = {
	  root: null,
	  rootMargin: '50px 0px',
	  threshold: 0
	};

	// Create the intersection observer
	const observer = new IntersectionObserver(function(entries, observer) {

	  entries.forEach(function (entry) {
		if (entry.intersectionRatio > observer.thresholds[0]) {
		  load(entry.target, observer);
		}
	  });    
	}, options);

	// Observe all img tags with the 'data-src' attribute
	document.querySelectorAll('img[data-src]').forEach(function(img) {
	  observer.observe(img);
	});

	// Load an image and unobserve it
	function load(img, observer) {
	  if (observer) {
		img.addEventListener('load', function() { 
		  observer.unobserve(img);
		});
	  }

	  const dataSrc = img.getAttribute('data-src');

	  if (dataSrc) {
		img.setAttribute('src', dataSrc);
	  }
	}
}