javascript image rotator 문제, 기본 이미지

각 페이지로드시 임의의 이미지를 선택하는 간단한 자바 스크립트 이미지 회전기를 작성했습니다. 문제는 기본 이미지를 사용하는 경우 자바 스크립트가로드되어 대체되기 전에 기본 이미지가 잠시 표시된다는 것입니다. 분명히 누군가가 자바 스크립트를 사용하지 않으면 이미지를 볼 수 있기를 원합니다. 어떻게하면 기본 이미지가 깜박 거리지 않고 기본 이미지를 가질 수 있습니까?javascript image rotator 문제, 기본 이미지

출처

2008-10-21 Galen

window.onload가 실행되기 전에 페이지 HTML을 변경하려는 것처럼 들립니다. 그 시점에서 기본 이미지가 이미 표시 되었기 때문에 소리가납니다.

"DOMContentLoaded"또는 일반적으로 domready 이벤트로 자바 스크립트 함수를 연결해야합니다. Dean Edwards는 환상적인 크로스 브라우저 구현 http://dean.edwards.name/weblog/2006/06/again/을 제공했습니다.

희망이 도움이됩니다.

출처

2008-10-21 06:08:38

페이지를로드 할 때 가장 먼저 수행 할 작업으로 기본 이미지를 숨기면 사용자가 이미지를 볼 기회가 없을 수 있습니다. 그런 다음 이미지에 onload 핸들러를 설치하고 소스를 임의의 이미지로 변경할 수 있습니다. 이미지가로드되면 이미지를 숨김 해제 할 수 있습니다.

window.onload = function() { 
    var img = document.getElementById("rotating_image"); 

    // Hide the default image that's shown to people with no JS 
    img.style.visibility = "hidden"; 

    // We'll unhide it when our new image loads 
    img.onload = function() { 
     img.style.visibility = "visible"; 
    }; 

    // Load a random image 
    img.src = "http://example.com/random" + Math.floor(Math.random() * 5) + ".jpg"; 

};

출처

2008-10-21 04:51:06

이미지 바로 다음에 JS를 넣는 것을 고려할 수도 있습니다. 이것은 페이지가로드 될 때가 아닌 시점에서 JS를 실행할 수 있습니다. 그러나 나는 이것에 관해 확실하지 않다.

<img src="/not/rotated/image.jpg" /> 
<script type="text/javascript"> 
// change image 
</script>

출처

2008-10-21 04:56:15

javascript image rotator 문제, 기본 이미지

답변

관련 문제