JSP에서 javascript로 미리 이미지를 로드하기
프로그래밍2013. 1. 25. 21:18
JSP에서 javascript로 미리 이미지를 로드하기
안녕하세요^^ 황금너구리입니다. 요즘에 날씨가 많이 추워지는군요.ㅠ.ㅠ. 더 이상 추워지는 안되는데 말이에용! 오늘은 JSP에서 javascript를 이용하여서 미리 이미지를 로드하는 방법을 알려드리겠습니다.
기존에 썼던 html태그 중에서 <img src = "이미지주소"> 이런 태그를 썼습니다. 이와 같은 태그를 썼다면 기존의 방식은 조금 느린 방식인거 같아요. 여러번의 고뇌를 하던 중에 제일 좋은 방법이 없을까 해서 열심히 연구를 하였습니다. javascript에서 미리 이미지를 로드를 하는 방법이 더 빠르더군요. 이미지 크기나 사이즈에 따라서 다를 수도 있습니다. 물론 스마트폰에서 실험을 하기 위해서 javascript에서 미리 로드하는 방식으로 쓰고 있습니다. 소스를 공개를 하여 드리겠습니다.
javascriptimages.jsp
<%@ page contentType = "text/html; charset = UTF-8" pageEncoding = "utf-8" %>
<%@ page import = "java.io.*, java.util.*, java.sql.*;" %>
<%@ page contentType = "text/html; charset = UTF-8" pageEncoding = "utf-8" %>
<%@ page import = "java.io.*, java.util.*, java.sql.*;" %>
<!DOCTYPE html>
<head>
<meta charset = "UTF-8"><title>javascript에서 미리 이미지 로드하기</title>
<script language = "javascript">
function on_loads()
{
img1 = new Image;
img1.src = "images/img1.jpg";
img2 = new Image;
img2.src = "images/img2.jpg";
img3 = new Image;
img3.src = "images/img3.jpg";
img4 = new Image;
img4.src = "images/img4.jpg";
<head>
<meta charset = "UTF-8"><title>javascript에서 미리 이미지 로드하기</title>
<script language = "javascript">
function on_loads()
{
img1 = new Image;
img1.src = "images/img1.jpg";
img2 = new Image;
img2.src = "images/img2.jpg";
img3 = new Image;
img3.src = "images/img3.jpg";
img4 = new Image;
img4.src = "images/img4.jpg";
document.getElementById("num1").src = img1.src;
document.getElementById("num2").src = img2.src;
document.getElementById("num3").src = img3.src;
document.getElementById("num4").src = img4.src;
}
</script>
</head>
<body onload = "javascript:on_loads();">
document.getElementById("num2").src = img2.src;
document.getElementById("num3").src = img3.src;
document.getElementById("num4").src = img4.src;
}
</script>
</head>
<body onload = "javascript:on_loads();">
<img id = "num1" width = "330"><br>
<img id = "num2" width = "330"><br>
<img id = "num2" width = "330"><br>
<img id = "num3" width = "330"><br>
<img id = "num4" width = "330"><br>
<img id = "num4" width = "330"><br>
</body>
</html>
</html>
결과는 아래의 화면과 같습니다. 미리 이미지를 불러와버립니다. 기존의 img src태그와는 약간은 틀립니다. 속도감의 문제이네요. 아직은 저도 전문가는 아닙니다. 여러분들께 코딩을 하실 때 참조를 하시고 싶은 분들께 참조를 하셔도 좋아요. 저두 이런 소스를 찾는데 하루 투자를 할 때도 있어요. 그 만큼 고뇌를 해야되요.
위와 같이 4개의 이미지가 나옵니다. 도움이 되시길 바래요.ㅎㅎ
계속 연구를 해보고 있습니다. 좋은 어플을 하나 만들려고 합니다. 안드로이드와 JSP를 이용해서 어플을 만들 수가 있어요. 안드로이드와 PHP로도 만들 수 있고, 문제는 파싱을 해야되는데 아직 파싱에 대한 개념이 부족을 하여서 파싱을 못하고 있습니다.
단 하나의 문자를 읽어들이기 위해서 고뇌를 더 해야겠네요..;;
프로그래밍은 정말로 쉽지 않은거 같아요. 무언가 전율이 넘치면서도 어려운 그런걸까??ㅎㅎ
앞으로도 꾸준히 포스팅을 할 계획입니다. 다음 포스팅에서는 안드로이드 Webview에서 JSP와 약간의 통신을 해보는 거에요. 도전적인거 같네요.ㅎㅎ! 예를 들어서 Webview에서 JSP에 값을 받아와서 안드로이드에서 그 값이 맞는지 확인하고 맞으면 대화창이 나오거나 아니면 종료되는 형식으로 알려드리겠습니다. 즉 간단하게 통신~! 아직은 안드로이드 JSP를 이용하여서 로그인 기능을 구현을 해보지를 못했습니다. 구현을 하게 된다면 블로그에다가 알려드릴께요.ㅎㅎ! 주말인데 옷 따뜻하게 입으시고 감기 조심하시길 바래요^^!! 언제나 행복한 하루되시길^^
앞으로도 꾸준히 포스팅을 할 계획입니다. 다음 포스팅에서는 안드로이드 Webview에서 JSP와 약간의 통신을 해보는 거에요. 도전적인거 같네요.ㅎㅎ! 예를 들어서 Webview에서 JSP에 값을 받아와서 안드로이드에서 그 값이 맞는지 확인하고 맞으면 대화창이 나오거나 아니면 종료되는 형식으로 알려드리겠습니다. 즉 간단하게 통신~! 아직은 안드로이드 JSP를 이용하여서 로그인 기능을 구현을 해보지를 못했습니다. 구현을 하게 된다면 블로그에다가 알려드릴께요.ㅎㅎ! 주말인데 옷 따뜻하게 입으시고 감기 조심하시길 바래요^^!! 언제나 행복한 하루되시길^^
'프로그래밍' 카테고리의 다른 글
| 안드로이드 어플리케이션 종료 방법 (16) | 2013.04.02 |
|---|---|
| JSP 달력 간단하게 만들어보기 (2) | 2013.02.01 |
| 알FTP로 웹호스팅에 접속을 쉽게 하자 (3) | 2013.01.30 |
| CSS를 이용한 Button 만들기 (3) | 2013.01.29 |
| 안드로이드와 JSP 간단한 통신하는 방법 (9) | 2013.01.28 |
| MSSQL JDBC Driver 설치 및 jsp에서 mssql DB 연동하기 (7) | 2013.01.17 |
| Java 개발툴 JDK 설치 및 환경설정 하기 (8) | 2013.01.16 |
| JSP 프로그래밍을 위한 Tomcat 설치 및 시작하기 (4) | 2013.01.15 |
| JSP 값 전달하는 방법 (6) | 2013.01.14 |
| 앱개발자를 위한 공간입니다. (3) | 2013.01.04 |
댓글()