2011-01-24 4 views
1

게으른로드가되면 더 많은 이미지와 다른 코드가있는 페이지가 있습니다.자바 스크립트가있는 사용자를 위해 콘텐츠를 지연로드하는 더 좋은 방법은 무엇입니까?

나는 이것을 noscript 태그와 함께 시도했지만 IE에서 올바르게 작동하지 않는 것으로 나타났습니다. 내가 테스트 한 다른 모든 브라우저 (ff, 오페라, 크롬, 사파리 등)에서 작동하므로 조금 좌절했습니다.

잠시 동안 기술을 사용하고 IE를 자주 테스트했기 때문에 실제로 IE에서이 작업을 수행했는지는 확실합니다.하지만 지금은 작동하지 않습니다. Google은 결코 작동하지 않는다고 제안하는 것 같습니다. 여기

내가 시도하는 것을 보여줍니다 복사 및 붙여 넣기 할 수있는 간단한 예입니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>lazy load with noscript</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 

    <noscript> 
    <div> 
    <p>other content here</p> 
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" /> 
    </div> 
    </noscript> 

    <noscript> 
    <div> 
    <p>other content here 2</p> 
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" /> 
    </div> 
    </noscript> 

    <script type="text/javascript"> 
    var html = $("noscript:first").text(); 
    alert(html); 
    $("body").append(html); 
    </script> 

</body> 
</html> 

자바 스크립트와 사용자에 사용되는 HTML과 자바 스크립트없이이 동일합니다. jquery를 사용하여 내용을 쉽게 탭으로 볼 수 있습니다. 콘텐츠는 자바 스크립트에서 탭으로 표시되기 때문에 탭이 열릴 때 느린로드가 필요하므로 페이지에 상당한 크기의 첨부 파일이있을 때 초기에 다운로드하지 않아도됩니다.

html을 두 번 이상 출력하지 않고 어떻게이 작업을 수행 할 수 있습니까?

+1

같은 것을 사용하여 자바 스크립트를 lazyload 수 있습니다. 참조 : http://www.tjs.co.uk/blog/a-tale-of-accessibility-internet-explorer-and-the-noscript-tag.htm – Raynos

답변

0

당신이해야 할 일은 모든 이미지가 픽셀 gif (또는 png)를 가리 키도록하는 것입니다. 사용자가 이미지 근처에서 스크롤했는지 확인한 다음 자바 스크립트를 사용하여 픽셀을 전체 이미지로 바꿔주는 스크립트를 작성하십시오.

<img src="pixel.gif" data-img="path-to-full-img.jpg" /> 

다른 방법으로, 당신은 plugin like this을 사용할 수 있습니다 내가 쓴 스크립트에서

, 당신처럼 보이는 이미지 태그를 가질 것이다. 참고 : 이전에는이 ​​플러그인을 사용하지 않았지만 필요한 것만 큼 보입니다. 정말 하드 코어를 얻을 수 원한다면

, 당신은 스크립트가 활성화 된 경우 IE는 DOM에 NOSCRIPT 태그를 추가하지 않는 것으로 보인다 시간 ead.js 또는 control.js

+0

방금 ​​질문 내용을 업데이트하여 내용이 이미지 만. 나는 자바 스크립트를 사용하여 사용자가 클릭하여 콘텐츠 섹션을 볼 수있는 탭으로 콘텐츠를 나눕니다. 나는 1px 이미지를 사용하는 것이이 상황에 대한 좋은 생각이라고 생각하지 않는다. 사용자가 자바 스크립트를 가지고 있지 않다면 모든 것을 볼 수 있기를 원하기 때문이다. 단지 페이지가 길어지고 다운로드 시간이 조금 더 걸리기 때문이다. – user319862

+0

그런 다음 탭에 내용을 가져 오기 위해 ajax 요청을해야합니다. noscript를 사용하는 대신, 자바 스크립트없이 콘텐츠를 멋지게 보이게하고 자바 스크립트에서 탭 스타일을 제공하는 요소를 포함하도록 클래스를 만들면 어떨까요? – dawnerd

+0

기본적으로 내가하고있는 일입니다. 자바 스크립트와 noscript에 사용되는 html은 동일합니다. 단지 CSS 스타일이 다릅니다. noscript 태그를 사용하면 탭이 자바 스크립트로 열리기 전에 브라우저에서 콘텐츠를 렌더링하지 않는 (이미지 가져 오기, 플래시 실행 등) 게으른로드를 수행 할 수 있습니다. html은 이미 사용 가능하므로 아약스 요청으로 서버 측에 두 번 쓰지 않아도되기를 정말로 바랬습니다. 자바 스크립트를 사용하는 사용자를 위해 페이지를 여러 번 생성 할 수있는 방법이 없습니까? 모든 콘텐츠에 대해 http 요청을 하나씩 줄이는 것이 좋았습니다. – user319862

관련 문제