Tại thời điểm này, tôi tìm thấy hai tùy chọn, để giải quyết vấn đề này: src ban đầu của tất cả các hình ảnh là một cơ sở dữ liệu 64 hình ảnh trống
Tùy chọn này không chỉ yêu cầu một trình duyệt hiện đại mà còn có thể chậm hơn ở phía máy khách vì trình duyệt phải giải mã 64 dữ liệu hình ảnh để tạo ra hình ảnh.
Src ban đầu của tất cả các hình ảnh là một url của hình ảnh 1x1 trống
Đó là một động thái OK với điều kiện là URL hình ảnh trống cho tất cả các vị trí hình ảnh chính xác là cùng một URL và nó có tuổi thọ bộ đệm dài được xác định trong tiêu đề HTTP "kiểm soát bộ đệm". Vấn đề với điều này là khi các tệp hình ảnh mới tải, các ô hình ảnh sẽ chuyển sang kích thước mới có thể khiến trải nghiệm người dùng không tuyệt vời như vậy.
Ý tưởng gần như hoàn hảo là ...
Khi trang khởi động, hãy hiển thị một lưới với các hộp có kích thước cố định có thể chứa được mỗi hình ảnh. Sẽ ổn nếu toàn bộ lưới không vừa trên màn hình. Sau đó, tạo javascript thực thi sau khi tải HTML và trong javascript đó, tạo một thành phần hình ảnh mới và gắn nó vào từng ô của lưới sau đó đặt nguồn hình ảnh vào tệp hình ảnh chính xác. Làm điều này cho đến khi màn hình đầu tiên lấp đầy. sau đó phát hiện cuộn trong javascript và sau đó khi cuộn xảy ra, lặp lại quy trình trên cho các ô mới.
Bây giờ nếu bạn muốn thứ tốt nhất và chất lượng không phải là mối quan tâm lớn, thì điều tôi khuyên bạn (mà tôi cũng đã thực hiện trên trang web của mình) là xây dựng một lưới và đặt nó sao cho hình nền của lưới đó là một tấm sprite của tất cả các hình ảnh được định dạng như hình vuông của hình ảnh. Phương pháp này linh hoạt và tải nhanh vì một yêu cầu được yêu cầu cho tất cả các hình ảnh.
Đây là một HTML mẫu để sử dụng nếu bạn muốn đi theo con đường nhanh. Chỉ có hai yêu cầu được thực hiện. Mã HTML và một hình ảnh. Trong mã này, tôi giả sử mỗi hình ảnh từ trang tính có chiều rộng 100 pixel và chiều cao 200 pixel và mỗi hình ảnh được căn chỉnh hoàn hảo cạnh nhau không có khoảng trống.
<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>
Trong mã của tôi, tôi đã thêm 3 dấu chấm. Điều đó có nghĩa là bạn có thể tiếp tục thêm hình ảnh bằng cách tăng số lượng và bằng cách tăng vị trí thêm 100 mỗi lần với điều kiện là trang sprite của bạn chỉ có một hàng hình ảnh. Ngoài ra, với một số trình duyệt như Opera, bạn có thể cần thêm một dấu âm trước các giá trị vị trí nền để chúng hoạt động.