Preload Image sử dụng JavaScript và CSS
Đối với những trang có nhiều ảnh thì kỹ thuật Preload Image đặc biệt hữu ích trong việc giúp giảm thời gian người dùng phải chờ đợi khi trình duyệt hiển thị nội dung của trang. Một ví dụ điển hình hay sử dụng kỹ thuật preload image đó là khi chúng ta có một gallery ảnh được hiển thị theo kiểu ...
Đối với những trang có nhiều ảnh thì kỹ thuật Preload Image đặc biệt hữu ích trong việc giúp giảm thời gian người dùng phải chờ đợi khi trình duyệt hiển thị nội dung của trang. Một ví dụ điển hình hay sử dụng kỹ thuật preload image đó là khi chúng ta có một gallery ảnh được hiển thị theo kiểu từng slide khác nhau. Mỗi slide sẽ chứa một ảnh và chúng ta có thể di chuyển từ slide này qua slide khác để xem toàn bộ gallery. Ví dụ như sau:
Ở ví dụ như trong hình minh hoạ phía trên thì cách dễ dàng nhất để hiển thị gallery đó là chúng ta sẽ tải toàn bộ ảnh trong gallery về rồi sử dụng JavaScript để hiển thị lần lượt từng slide. Tuy nhiên việc tải toàn bộ ảnh trong gallery gặp phải một hạn chế đó là trình duyệt sẽ cần nhiều thời gian hơn để tải trang và nếu như có một số lượng lớn các image trong gallery và với kích thước lớn thì người dùng sẽ phải đợi lâu mới có thể xem được nội dung của trang.
Tuy nhiên khi sử dụng kỹ thuật Preload Image để hiển thị gallery ảnh chúng ta sẽ giải quyết được những hạn chế mới đề cập ở trên. Cụ thể chúng ta sẽ làm theo các bước như sau:
- Bước 1: Chỉ tải về image đầu tiên trong gallery để hiển thị ở slide đầu.
- Bước 2: Sau khi trình duyệt tải xong trang chúng ta sẽ thực hiện việc load các image ở slide kế tiếp.
- Bước 3: Với mỗi lần xem slide tiếp theo trình duyệt sẽ có thể hiển thị ngay image đã được load ở bước 2.
So sánh việc tải chúng một lúc toàn bộ ảnh trong gallery về thì với cách làm như trên người dùng sẽ không cần phải đợi lâu để có thể xem được nội dung của trang.
Có hai cách khác nhau để có thể preload image trong trang đó là sử dụng JavaScript hoặc CSS.
Sử Dụng JavaScript
Với cách làm này chúng ta sẽ cần tạo một hoặc nhiều biến (tương ứng với số lượng image cần preload) từ đối tượng Image của JavaScript và sau đó gán giá trị cho thuộc tính src:
<script type="text/javascript"> var Img_2 = new Image(); Img_2.src = 'http://example.net/images/image_1.jpg'; </script>
Nếu cần preload nhiều ảnh thì bạn có thể tạo ra một hàm như sau:
<script type="text/javascript">
function preloadImage(src) {
var image = new Image();
image.src = src;
}
</script>
Và khi sử dụng:
preloadImage('http://example.net/images/image_1.jpg');
Để cách làm này đạt hiệu quả cao nhất bạn nên đặt đoạn code JavaScript dùng để preload image ở phía cuối trang, cụ thể là trước thẻ đóng <body>.
Sử Dụng CSS
Một cách khác để preload image đó là sử dụng CSS. Với cách làm này chúng ta sẽ gán thuộc tính background-image áp dụng cho một phần tử mà không tồn tại trên trang:
<style type="text/stylesheet">
.preload-image-31-05-2017 {
background-image: url('http://example.net/images/image_1.jpg');
}
</style>
Sử dụng đoạn code trên thì bạn cần lưu ý rằng trên trang không có phần từ HTML nào được đặt tên với class là preload-image. Tuy nhiên để 100% chắn hơn nữa thì bạn có thể ẩn phần tử này đi nếu như lỡ có ai đó tham gia code cùng mà sử dụng tên class này cho phần tử HTML trên trang:
.preload-image-31-05-2017 {
background-image: url('http://example.net/images/image_1.jpg');
display: none;
}
Để cách làm này đạt hiệu quả cao nhất bạn nên nhúng đoạn mã CSS trên ở phía cuối trang phía trước thẻ <body>.
