1. 배경 소개
온라인 사진 앨범 애플리케이션에서 사용자의 가장 간단한 사진을 볼 필요가 있습니다. 네트워크가 느려지면 사진보기를위한 대기 시간이 비교적 길고 사용자 경험이 매우 열악합니다.
2. 현재 상황
사진을로드하는 두 가지 주요 방법이 있습니다.
(1) IMG 태그와 함께 HTML 페이지에 사진을 직접로드하고 표시하는 가장 독창적 인 방법. 이 방법은 네트워크 속도가 느리거나 표시 될 사진이 비교적 크고 사용자 경험이 좋지 않을 때 빈 대기 프로세스가 있습니다.
(2) 먼저 IMG 태그를 사용하여 사진의 축소판을로드하여 HTML 페이지에 사진을 표시 한 다음 JavaScript를 사용하여 숨겨진 사진의 원본 이미지를로드 한 다음 원본 이미지가 페이지에 표시되기 전에로드 될 때까지 기다립니다. 다음은 유량 차트입니다.
3. 우리의 해결책
최근 QQ 사진 앨범에서 만든 최적화 방법 중 일부는 두 가지 호소 방법의 단점을 해결했으며 사용자의 사진을 볼 필요가 있습니다. 가능한 한 빨리 사진의 일반적인 상황을보고 가능한 한 빨리 원본 이미지를보십시오. 이 방법은 썸네일과 원본 이미지를 사용하여 동시에로드 및 오버레이 표시를합니다. 먼저 썸네일을로드하고 디스플레이를 확장하면 큰 이미지가 축소판에 겹쳐져 동시에로드됩니다. 썸네일은 매우 작으며 일반적으로 사용자가 흐릿한 이미지를 빠르게 볼 수 있습니다. 큰 이미지를로드하는 동안 썸네일은 점차적으로 위에서 아래로 덮여있어 사용자가 로딩 프로세스 중에 큰 이미지를 볼 수 있습니다.
(1) 예제 다이어그램
위에서 볼 수 있듯이이 방법의 처리 단계는 다음과 같습니다.
1). 사진 썸네일과 원본 이미지의 URL을 가져 와서 사진의 길이와 너비를 얻으십시오.
2). 사진 썸네일을로드하고 표시하고 필름의 길이와 너비에 따라 축소판을 늘립니다. 현재 사용자는 흐릿한 효과를 본다.
3). 원본 사진을로드하고 표시하고 썸네일의 원본 이미지를 겹쳐서 표시합니다. 원본 이미지는로드만큼 많이 표시됩니다. 로드되지 않으면 여전히 썸네일이 표시됩니다. 점차적으로 축소판을 덮어 씁니다. 원래 이미지의 로딩 프로세스 중에 사용자는 블러에서 클리어로 사진의 구배 효과를 볼 수 있습니다.
4). 원본 이미지가로드되면 원본 이미지가 모두 썸네일을 덮어 썼으며 사용자는 실제 원본 이미지를 볼 수 있습니다. 이 시점에서 썸네일을 숨기려면 썸네일이 PNG 또는 GIF와 같은 투명한 효과로 이미지 표시를 방해하지 않도록 할 수 있습니다.
(2) 샘플 코드
<!-사진의 크기를 설정-> <div> <!-작은 그림이 큰 크기로 표시됩니다-> <img src = "small_url"/> <!-원본 그림은 작은 그림에 중첩됩니다-> <img src = "big_url"/</div>
위는이 기사의 전체 내용입니다. JavaScript에 대한 자세한 내용은 "JavaScript 참조 자습서"및 "JavaScript Code Style Guide"를 확인하십시오. 또한 모두가 wulin.com을 더 지원하기를 바랍니다.