성능 측면에서 페이지에 1000 개의 이미지를 표시하는 가장 좋은 방법은 무엇입니까?

페이지에 1000 개의 아주 작은 이미지를 표시하려고합니다 (오히려 많은 부분이 있지만 내 컨트롤에서 제외).성능 측면에서 페이지에 1000 개의 이미지를 표시하는 가장 좋은 방법은 무엇입니까?

한꺼번에로드 할 때 성능이 크게 저하되어 1000 개의 이미지가 동시에 렌더링됩니다.

스크롤 할 때 이미지 src를 적용하는 것을 시도했는데 (250px 스크롤, 25 이미지로드 등), 타이머에 이미지로드를 시도했습니다.

이러한 방법으로 성능을 향상시키는 데 도움이되었지만 가장 효율적인 방법은 무엇입니까? 그들은 여전히 지연의 자극을 느꼈습니다 - 한 페이지에 많은 이미지를 렌더링하는 데 근본적인 문제가 있다는 것을 알고 있지만 더 나은 해결책이 있습니까?

는 편집 : 물론

매김 도움이되지만 여기에 옵션이 아닙니다 것이다. 또한 이미지가 API에서 추출되므로 1 개의 큰 이미지/스프라이트를 사용하는 것이 편리하지 않습니다.

출처

2011-09-09 sgb

CSS 스프라이트가 도움이 될까요? – Piskvor

가능한 [사용자가 스크롤 할 때 이미지를로드하는 지연로드 플러그인?] 복제본이 있습니까?] (http://stackoverflow.com/questions/4618343/lazy-load-plugin-to-load-images-as-user-scrolls) – home

, 나는 다음과 같은 최선의 해결책을 발견 이미지 (따라서 이미지가있는 1000 개의 요소가 있음)를 display:none으로 설정하십시오. 부모 요소

는 display:none & 또한 제 25 display:block 만들기 위해 디폴트 :

VAR의 scrollPos를 = 0; var endEle = 0;

$ (창).스크롤 (함수() {

scrollPos = $(window).scrollTop(); 

    if ($(window).scrollTop() < scrollPos + 250) { 

     //load 15 images. 

     $('.myDiv img').slice(endEle,endEle+50).each(function(obj){ 
      var self = $(this); 
      var url = self.attr("role"); 
      self.attr("src", url); 
      self.parent().css("display","block"); 
     }); 

     endEle = endEle + 50; 

    }

});

이것은 display:block의 다음 50 개 요소를 설정하고 <src><img role>로 전환 할 때마다 사용자가 스크롤을 250 픽셀 (페이지가 렌더링 될 때 이미지 URL은 role 넣었다).

출처

2011-09-10 11:49:04 sgb

모든 이미지가 고유 한 파일이면 다중 연결을 통해 이미지를 검색 할 때 큰 타격을 입을 수 있습니다. 모든 항목에 대해 1 개의 "마스터"이미지를 만든 다음 서로 다른 클래스 또는 ID로 각각 1000 개의 div를 만든 다음 각각에 대해 CSS 정의 배경 오프셋으로 정의 할 수 있습니다. 이 방법은 종종 CSS 스프 라이트라고도합니다.

http://css-tricks.com/158-css-sprites/

출처

2011-09-09 14:01:24

은 당신이 AJAX 페이지 매김을 할 수 없습니다, 그이 동적으로 페이지 번호를 기반으로 이미지를로드? 예를 들어, 페이지 당 25 개의 이미지. 첫 번째 페이지를 요청하면 다음 페이지를 동적으로로드합니다. 그렇게하면 사용자는 지연을 알지 못합니다. 성능 향상을 위해 할 수있는 일은 모두 있습니다!

은 서버 측에 이미지를 결합 아마 라인을 렌더링 할 수 :

출처

2011-09-09 14:02:03 ChrisH

는 여기에 또 다른 각도에서 대답입니까? 이것은 특정 상황에서만 작동 할 수 있습니다.

출처

2011-09-09 14:03:31

글쎄, 가장 좋은 해결책은 사용자가 볼 때 가장 좋은 해결책이라고 생각합니다. 즉 귀하의 스크롤 방식. 이것은 사용자가 보았던만큼 많은 이미지를로드하고 동시에 모든 이미지를로드하지 않는 것을 의미합니다. 당신이 말한대로, 그것은 당신의 통제에서 벗어났습니다; 그런 다음 페이지를 사용하는 것이 의문의 여지가 있습니까? 그것은 전체적으로 더 나은 접근 방법이 될 것입니다.

많은 양의 대역폭과 가능성이있는 메모리를 사용하기 때문에 많은 이미지가 어쨌든 많은 지연을 유발할 수 있습니다.

약간의 비틀기와 방법 '스크롤에 이미지로드'는 적응 및 cruically 각각의 부모 요소를 설정 : 스프라이트/매김이 상황에서 옵션 아니었다 때문에

출처

2011-09-09 14:03:48

성능 측면에서 페이지에 1000 개의 이미지를 표시하는 가장 좋은 방법은 무엇입니까?

답변

관련 문제