html <script>, 이미지 프리로딩(Image Preloading), 사용자브라우저(navigator.userAgent)

html <script>요소 는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며, javascript와 함께 사용된다.

 

1. script language 을 사용하는 경우

<script language="javascript"> 
자바스크립트구문
</script>

이방법은 옛날 방법이라 웹 표준에서 권장하지 않는다.

 

2. script type을 사용하는 경우

<script type="text/javascript">
<!-- 
자바스크립트 구문
//-->
</script>

자바스크립트 선언 시 주석안에 작성하는 이유 : 자바스크립트를 지원하지 않는 브라우저에서 실행되지 않도록 하기 위해서였다. 하지만 요즘은 자바스크립트 해석 못하는 브라우저는 없어서 주석을 안 써도 된다고 한다.

 

 

 

---

 

사용자 브라우저 종류 확인

 

var UserAgent = navigator.userAgent;  //navigator.userAgent로 사용자 브라우저 종류 가져오기 
if (UserAgent.match(/Android|SonyEricsson|/) != null)
{
   alert("An incompatible browser. Please log in to a different browser.");  
   location.href="/under_construction.jsp";

}

 

---

이미지 미리 불러오기 : 이미지 프리로딩

웹사이트에는 많은 이미지가 존재한다. 자연스럽게 웹페이지는 무거워질 수밖에 없고 그에 대한 해결책으로 현재는 이미지의 크기, 질 등의 최소화하는 작업이 존재한다.

 

요즘 방식 preloading 

미리 로딩하고 캐시로 가져오게 하는 방식이다.

preloading은 자바 스크립트, css 등 많은 방법이 있다.

 

preloading 비동기 방식  

 

function preloading (imageArray) {
    let n = imageArray.length;
    for (let i = 0; i < n; i++) {
        let img = new Image();
        img.src = imageArray[i];
    }
}

preloading([
    '1.png',
    '2.png',
    '3.png'
])

비동기 방식은 쉽게 말해 병렬적으로 처리된다. 

병렬은 동시에 여러 개의 이미지를 가져온다는 장점이 있지만, 경우에 따라 직렬보다 느릴 수도 있다.

그리고 우선순위와 상관없이 한 번에 처리한다면, 우선순위가 높은 이미지를 로딩이 지연될 수 있다.

 

preloading 동기적 방식

class Preloader { 

	constructor () {}   

	static series (imageArray) {    
	  let n = imageArray.length    
	  for (let i = 0; i < n; i++) {      
	  	let img = new Image()      
		img.src = imageArray[i]    
		}  
	}   

static parallel (imageArray, idx) {    
	let index = idx || 0    
	if (imageArray && imageArray.length > index) {      
		let img = new Image()      
		img.onload = function () {        
		preload(imageArray, index + 1)      }      
		img.src = imageArray[index]    }  }   

static inject (id) {    
	let div = document.createElement("div")   
	div.id = id   div.style.position= 'absolute'    
	div.style.top = '-9999px'   
	div.style.left = '-9999px'    
	document.body.appendChild(div)  
    } 
}

상황에 따라 우선순위를 결정하여 이미지를 로딩하는 방식이다.

동기식 비동기식은 상황에 따라 선택해서 사용해야 한다.  

 

 

 

예전 방식 MM_preloadImages() 

틀린 건 아니지만 효율성 최악이고 cpu자원도 많이 먹으며, 요즘 브라우저와 호환성에서도 문제가 된다.

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

 

 

 

 

출처 : 이미지 미리 불러오기(image preload) :: 마이구미 :: 마이구미의 HelloWorld (tistory.com)