Chrome에서 지연 중일 때 동적으로로드 된 내용으로 이미지로드

Question

각기 잠재적으로 수백 개의 이미지가 포함 된 탭에 여러 개의 독립적 인 섹션이 표시된 페이지가 있습니다. 그 부분이 여기에

을 렌더링입니다되면 JQuery와는 JQuery lazy load plugin와 이미지의로드를

게으른을 약속 병렬로 섹션을로드

• : 나는이 일을하고, 페이지로드가 확대됨에 만들려면 어떻게 커피 스크립트에서이 일을하고 대한 의사 :

  $.when.apply($, sectionPromises).then(() -> 
       render each section 
       $("img.lazyload").lazyload() 
       return 
      ) 
  

  일이 끝나는 무슨 일이 첫번째 섹션에 ì 탭의 상단에있는 처음 몇 이미지입니다 로드가 잘되었지만 첫 번째 섹션의 아래쪽 또는 다른 탭 섹션의 전체 이미지는 모두 Chrome에서 단순히 '(대기 중)'입니다.

  이것은 플러그인을 사용하여 일반적으로 구성된 페이지에서 이미지를 지연로드하는 사이트의 다른 부분에서는 발생하지 않습니다 (한꺼번에). 그러나 여기 재미있는 일이 있습니다. 아래로 스크롤하거나 탭을 이동할 때 Chrome 개발자 도구를 열어두면 가끔의 문제가 발생하지 않습니다. 모든 것이 완벽하게로드됩니다. 그게 얼마나 야생입니까?

  동적으로 생성 된 콘텐츠에서 이러한 지연된 이미지를 Chrome에서 올바르게로드하는 방법에 대한 아이디어는 Chrome 개발자 도구를 열지 않고도 크게 평가할 수 있습니다.

Answer 1

불행하게도, 내가 찾을 수있는 가장 좋은 것은 chrome://net-internals/#sockets로 이동하여 페이지 상단의 "플러시 소켓 풀"버튼을 누르하는 것입니다. 모든 이미지가있는 페이지를 새로 고치면 모든 이미지가 지연되어로드됩니다.

분명히 클라이언트가 브라우저를 조정할 것을 기대하면서, 방법은 알 수는 없지만 선택 사항이 아니라는 것을 당연히 알 수 있습니다.

Answer 2

나는 비슷한 문제가 있다고 생각했지만, DOM이 제안한 순서 (DOM에서는 순차적이지는 않음)에서 요소가 보이지 않아서 Lazyload 플러그인이 일부 요소를 검사하여 뷰포트에 있지 않고 실행을 중지합니다.

당신은 높은 무언가에 failure_limit 옵션을 높이기 위해 시도 할 수

, 아래 jQuery.lazyload Docs 참조 "이미지가 연속하지 않는 경우"뷰포트 외부의 첫 번째 이미지가 발견 될 때 기본 루프에 의해

가 중지됩니다. 이는 다음과 같은 가정에 근거합니다. 페이지의 이미지 순서는 HTML 코드의 이미지 순서와 동일합니다. 일부 레이아웃 가정에서는 이것이 틀릴 수도 있습니다. failure_limit 설정으로 로딩 동작을 제어 할 수 있습니다.

$("img.lazy").lazyload({ 
    failure_limit : 10 
});