이미지 로딩 시퀀스 제어

나는 정확하게 같은 크기이고 절대적으로 서로 위에 놓인 몇 개의 이미지를 가지고 있습니다. 배경 이미지 (z- 인덱스가 가장 낮은 이미지)를 제외하고 모두 투명 .gif입니다. 행동면에서 배경 이미지는 항상 내 페이지에 있습니다. 다른 이미지는 확인란을 사용하여 켜고 끌 수 있습니다.이미지 로딩 시퀀스 제어

내 문제는 느린 연결에서 페이지가로드되는 경우입니다. 투명 이미지의 크기가 작기 때문에 배경 이미지로드가 완료 될 때까지 가장 먼저로드되어 눈에 잘 띄지 않는 모양을 제공합니다.

이미지가로드되는 순서를 제어하여 배경 이미지로드가 끝날 때까지 투명 이미지가 나타나지 않도록 할 방법이 있습니까? 그렇게하는 과정에서 내 페이지 로딩 시간을 늦추고 싶지는 않습니다. 이미지를 synchonously로드하는 것처럼 보입니다.

출처

2010-11-20 kittyhawk

이미지 객체의 onLoad 이벤트를 사용할 수 있습니다. 다음과 같은 내용 :

<html>  
<head> 

    <script type="text/javascript"> 
     function imageLoaded(imgId, url) { 
     alert(imgId); 
     var img = document.getElementById(imgId); 
     img.src = url; 
     } 
    </script> 
</head> 

<body> 
    <img id="bg" src="http://pupunzi.files.wordpress.com/2009/01/imgnav.jpg?w=350&h=285" alt="image" onLoad="imageLoaded('img1', 'http://forbiddenplanet.co.uk/blog/wp-content/uploads/2009/01/Adam%20Elliot%20Max%20and%20Mary%20animation.jpg');" /> 
    <img id="img1" onLoad="imageLoaded('img2', 'http://pupunzi.com/images/components/mb.imageNavigator.png');" alt="image 1" /> 
    <img id="img2" alt="image 2"/> 
</body> 

</html>

이 예에서는 이전 이미지가로드 될 때 이미지로드 방법을 알리는 경고를 보냅니다.

출처

2010-11-20 03:05:32

이미지 로딩 시퀀스 제어

답변

관련 문제