현재이 문제를 해결하기 위해 두 가지 옵션을 찾았습니다. 모든 이미지의 초기 src는 데이터베이스 64 빈 이미지입니다.
이 옵션은 최신 브라우저를 필요로 할뿐만 아니라 이미지를 생성하기 위해 브라우저가 이미지 데이터를 base-64 디코딩해야하기 때문에 클라이언트 측에서 느려질 수 있습니다.
모든 이미지의 초기 src는 빈 1x1 이미지의 URL입니다.
모든 이미지 슬롯의 빈 이미지 URL이 정확히 동일한 URL이고 HTTP 헤더 "cache-control"에 긴 캐시 수명이 정의되어 있으면 괜찮습니다. 이 문제는 새로운 이미지 파일이로드 될 때 이미지 사각형이 새로운 크기로 이동하여 사용자 경험을 멋지게 만들 수 없다는 것입니다.
거의 완벽한 아이디어는 이것입니다 ...
페이지가 시작되면 각 이미지를 수용 할 수있는 고정 크기 상자가있는 격자를 표시하십시오. 전체 그리드가 화면에 맞지 않으면 괜찮습니다. 그런 다음 HTML이로드 된 후 실행되는 javascript를 작성하고 해당 javascript에서 새 이미지 요소를 작성하여 그리드의 각 셀에 첨부 한 다음 이미지 소스를 올바른 이미지 파일로 설정하십시오. 첫 화면이 가득 찰 때까지이 작업을 수행하십시오. 그런 다음 자바 스크립트 내에서 스크롤을 감지 한 다음 스크롤이 발생하면 새 셀에 대해 위의 프로세스를 반복하십시오.
이제 최고를 원하고 품질이 큰 관심사가 아닌 경우, 내가 추천하는 것은 (내 사이트에서도 구현 한 것) 그리드를 구성하고 그리드의 배경 이미지가 정사각형 이미지로 서식이 지정된 모든 이미지의 스프라이트 시트. 이 방법은 모든 이미지에 대해 하나의 요청이 필요하므로 유연하고 빠르게로드 할 수 있습니다.
빠른 경로로 가고 싶을 때 사용할 템플릿 HTML은 다음과 같습니다. 두 번만 요청됩니다. HTML 코드와 하나의 이미지. 이 코드에서는 시트의 각 이미지가 너비 100 픽셀, 높이 200 픽셀이며 각 이미지가 간격없이 서로 나란히 정렬되어 있다고 가정합니다.
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
내 코드에는 3 개의 점이 추가되었습니다. 즉, 스프라이트 시트에 한 줄의 이미지 만있는 경우 숫자를 늘리고 매번 위치를 100 씩 늘려 이미지를 계속 추가 할 수 있습니다. 또한 Opera와 같은 일부 브라우저에서는 배경 위치 값 앞에 음수 부호를 추가해야 작동 할 수 있습니다.