첫 번째 이미지를로드 할 때 FlexSlider 이미지 왜곡/점프?

Question

그래서 내 FlexSlider가 my site에 천천히 원래로드 중입니다. 나는 몇 가지 해답을 찾고 Flexslider slow image load을 보았다. 가장 유용한 답변을 구현하려고 시도했을 때 몇 가지 문제가 발생했습니다. 이제 내 사이트가 이미지를 왜곡하는 것처럼 보입니다. 이미지가로드 될 때 일종의 '깜박임'이됩니다. (특히 사파리와 크롬에서 이것을 확인했습니다.)

누구나 빨리로드 할 수있는 방법을 알고 있지만 현재하고있는 것처럼 엉망이되지는 않습니까?

Answer 1

내가 보는 것은 리플 로우 및 재 페인트입니다. FlexSlider 내의 모든 이미지의 너비와 높이 지정. https://developers.google.com/speed/docs/best-practices/payload#CompressImages 을 그리고 그것은 빠르고되지로드 버전을 엉망해야

생산

에서 진보적 인 사진과

스크립트의 축소의 flexslider.css 및 jquery.flexslider.js를 사용

<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="flex/images/slide1.jpg" alt="Residential doors." width="800" height="300"/>... 
    </li> 
    <li> 
     <img src="flex/images/slide2.jpg" alt="Commercial doors." width="800" height="300"/>... 
    </li> 
    <li> 
     <img src="flex/images/slide3.jpg" alt="One of our installations." width="800" height="300"/>... 
    </li> 
    </ul> 
</div> 

은 JPEG 압축.