CSS chỉ tải trước hình ảnh - Thủ thuật CSS

Một lý do lớn để sử dụng tải trước hình ảnh là nếu bạn muốn sử dụng hình ảnh cho hình nền của một phần tử trên sự kiện mouseOver hoặc: hover. Nếu bạn chỉ áp dụng hình nền đó trong CSS cho trạng thái: hover, hình ảnh đó sẽ không tải cho đến sự kiện đầu tiên: hover và do đó sẽ có một khoảng thời gian trễ gây khó chịu ngắn giữa chuột đi qua khu vực đó và hình ảnh thực sự hiển thị .

Kỹ thuật số 1

Tải hình ảnh về trạng thái bình thường của phần tử, chỉ dịch chuyển nó ra xa với vị trí nền. Sau đó di chuyển vị trí nền để hiển thị nó khi di chuột.

#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )

Kỹ thuật số 2

Nếu phần tử được đề cập đã áp dụng hình nền và bạn cần thay đổi hình ảnh đó, thì phần trên sẽ không hoạt động. Thông thường, bạn sẽ chọn một sprite ở đây (một hình nền kết hợp) và chỉ cần thay đổi vị trí nền. Nhưng nếu điều đó là không thể, hãy thử điều này. Áp dụng hình nền cho một phần tử trang khác đã được sử dụng, nhưng không có hình nền.

#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )

Ý tưởng tạo các phần tử trang mới để sử dụng cho kỹ thuật tải trước này có thể nảy ra trong đầu bạn, như # preload-001, # preload-002, nhưng điều đó đi ngược lại tinh thần của các tiêu chuẩn web. Do đó, việc sử dụng các phần tử trang đã tồn tại trên trang của bạn.

Tôi đã có ý tưởng thử và sử dụng cùng một phần tử, chỉ sử dụng: sau pseduo-class để tải hình ảnh, vì vậy bạn không cần phải dựa vào việc có đủ hình ảnh không có nền không liên quan trên trang của bạn để làm việc, nhưng vì bất cứ lý do gì không muốn tải trước chúng đúng cách.