번역: CSS 이미지 프리로더 만들기
중국어: 순수 CSS 이미지 사전 로딩
무단전재시 출처를 밝혀주시면 감사하겠습니다!
이미지 사전 로드를 구현하는 방법에는 여러 가지가 있으며, 일반적으로 스크롤을 유지하기 위해 주로 Javascript를 사용합니다. 더 이상 Javascript 사전 로드에 제약을 받지 말고 CSS를 사용하면 번거로움 없이 이미지를 사전 로드할 수 있습니다.
사전 로딩을 사용하는 이유
사전 로드 사용을 고려하는 이유는 무엇입니까? 탐색을 스크롤해야 했는데 이미지가 로드될 때까지 지연이 발생한 웹사이트가 있었나요...헤헤. 사전 로드는 이와 관련하여 도움이 될 것입니다. 페이지가 로드될 때 해당 이미지를 로드하고 브라우저의 캐시에 저장합니다. 이런 방식으로 사용자가 탐색을 스크롤할 때 지연 없이 아름답고 매끄러워집니다.
CSS 코드
개념은 CSS 스타일을 작성하여 여러 배경 이미지를 설정한 다음 해당 이미지를 볼 수 없도록 숨기는 것입니다. 이러한 배경 이미지는 미리 로드하려는 이미지입니다.
예는 다음과 같습니다.
#프리로더 {
/* 미리 로드하려는 이미지*/
배경 이미지: url(image1.jpg);
배경 이미지: url(image2.jpg);
배경 이미지: url(image3.jpg);
너비: 0px;
높이: 0px;
디스플레이: 인라인;
}
이는 이미지가 표시되지 않도록 숨기는 방법일 뿐입니다. 또한 사람들이 이미지를 밀어내기 위해 매우 큰 배경 위치 값을 사용하는 것을 본 적이 있습니다. 또는 음수 마진 값을 제공합니다. 미리 로드할 이미지를 숨기는 방법에는 여러 가지가 있습니다. 가장 적합한 방법을 선택하세요.
또 다른 상황
이미지가 로드되고 있다는 일종의 표시를 제공하는 일반적인 접근 방식을 따르면 다운로드할 이미지가 너무 크다는 일은 자주 발생하지 않습니다. 다음은 사용자에게 이미지가 로드 중이라는 힌트를 제공하는 CSS입니다.
img { 배경: url(loadingHourGlass.gif) 반복 없음 50% 50% }
Mac의 비치볼이나 PC의 모래시계처럼 GIF 이미지에 애니메이션을 적용할 수 있습니다. 사용자가 무슨 일이 일어나고 있는지 알 수 있도록 애니메이션을 사용하세요.
결론적으로
사전 로드가 적절할 때 최선을 다하면 사용자는 이를 좋아할 것입니다. 실제로 그들은 눈치 채지 못할 수도 있지만 이는 좋은 일입니다. 사이트가 로드되고 있다는 것을 알게 되면 사이트 속도가 너무 느린 것일 수 있습니다.
예제 1에 대한 특별 참고 사항
우선 댓글로 네티즌들이 제기한 질문에 감사드립니다. 이 글을 번역한 후 CSS 규칙에서 동일한 속성이 여러 번 정의되어 있다는 점을 고려하면 브라우저는 일반적으로 마지막 속성만 처리하므로 다음과 같은 작업이 필요하다고 판단했습니다. 테스트를 해보았으나 사태의 심각성으로 인해 제때에 처리되지 않아 오해가 생길 수 있었습니다.
내 테스트에 따르면 대부분의 브라우저는 마지막 이미지만 로드하고 처음 두 이미지는 무시됩니다 . 그러나 크롬과 같은 웹킷 코어 브라우저에서는 이 세 개의 이미지가 미리 로드됩니다. 예제 1은 문제 해결을 위한 좋은 아이디어를 제공 하지만 동일한 CSS 스타일로 여러 이미지를 로드하는 방법을 사용하려면 CSS3의 여러 배경 이미지 속성이 더 많은 브라우저에서 지원될 때까지 기다려야 할 수도 있습니다.
추신: 이 데모를 설명하겠습니다. 아마도 원저자는 별로 생각하지 않고 단지 사전 로드의 효과를 보여주고 싶었을 것입니다. 따라서 이 데모 페이지는 약간 간단했습니다. 그는 단지 사전 로드된 이미지를 a:hover의 배경으로 사용하여 마우스가 그 위로 지나갈 때 그것은, 그 그림의 흔들림 없는 현실을 가능하게 합니다. 글쎄, 그것은 기사의 두 번째 사용법입니다 ...
원본 번역 :
http://www.qianduan.net/pure-css-image-preloader.html