웹 사이트로드 문제 - 많은 양의 사진

Question

나는 몇 개의 사이트를 작성했으며 기본 html, javascript 및 PHP를 알고 있습니다.

최근에 내가 의도 한대로 작동하는 themefinder.dk 사이트가 만들어졌습니다. 단, 처음로드 할 때를 제외하고. 이미지가 올바른 위치로 이동하기 전에 몇 초 동안 "위치가 어긋난"것으로 표시됩니다. 여기에 picture이 있습니다.

내 문제는 어떻게 해결할 것입니다.

나는 이것에 영향을 줄 것으로 생각되는 것들을 발견했다.
- .image 클래스에서 absolute를 제거하면 로딩 문제가 해결되지만 페이지가 의도 한대로 보이지 않게된다.
- 페이지에 많은 양의 DOM 요소가 있습니다.
- 자바 스크립트는 document.ready에서 실행됩니다.

나는 놀랐지 만 아직 성공하지 못했습니다. 이 문제를 해결하는 방법에 대한 아이디어 나 생각은 언제든지 환영 할 것입니다.

현재로드 된 이미지의 양을 줄이거 나 방법을 찾으려면 아약스를 조사하고 있습니다. 그러나 아직 경험이 없기 때문에 Ajax에 대해 더 많은 것을 배우는 동안 해결책이 될 것입니다.

내 html 구조 나 사이트의 내용에 대해 자세히 알려 주면 알려주세요. 어떤 도움이라도 대단히 감사합니다.

안부
앤더스

Answer 1

로드 이미지 아약스를 사용할 필요가 없습니다. 페이지가로드되는 즉시 자바 스크립트에서 이미지 요소를 만들 수 있습니다.

var yourimage = $("<img />").attr('src', 'http://yourimageurl.com/image.jpg') 
         .load(function() { 
         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
          alert('Can\'t load image'); 
         } else { 
          $("#someid").append(yourimage); 
         } 
         });