Tối ưu việc nạp ảnh với Lazyload
Posted: 15/3/2011.
Lazyload là plugin của jQuery cải thiện việc tải hình ảnh ở những trang web dài. Ảnh bên ngoài khung hình sẽ chỉ thể hiện khi người dùng kéo chuột tới. Sử dụng Lazyload ở những trang web dài với nhiều hình ảnh sẽ giúp cho trang được tải nhanh hơn, trong...
![Tối ưu việc nạp ảnh với Lazyload]( "Tối ưu việc nạp ảnh với Lazyload")
Lazyload là plugin của jQuery cải thiện việc tải hình ảnh ở những trang web dài. Ảnh bên ngoài khung hình sẽ chỉ thể hiện khi người dùng kéo chuột tới. Sử dụng Lazyload ở những trang web dài với nhiều hình ảnh sẽ giúp cho trang được tải nhanh hơn, trong một số trường hợp nó còn giúp giảm tải cho máy chủ web.
Bước đầu tiên thì chúng ta sẽ tải Lazyload tại trang chủ http://www.appelsiini.net/projects/lazyload và jQuery.
Và để sử dụng thì chèn đoạn mã sau vào phần header của trang web:
- <script src="jquery.js" type="text/javascript"></script>
- <script src="jquery.lazyload.js" type="text/javascript"></script>
Sau đó chúng ta sẽ chọn vùng cho Lazyload hoạt động
- <script type="text/javascript" charset="utf-8">
- $(function() {
- $("img").lazyload();
- });
- </script>
Ở đoạn code này thì Lazyload sẽ áp dụng trên tất cả các thẻ img, và bạn có thể sửa lại theo nhu cầu của mình, như chỉ chọn phần ảnh ở trong thẻ div với id là content:
- $("#content img").lazyload()
Các bạn có thể xem demo tại đây.
[Nghean-Aptech st]
Các tin mới:
Hướng dẫn tích hợp giao diện trang quản trị SB Admin 2 vào Laravel 5.8.
Hướng dẫn tích hợp Google ReCaptcha v2 vào Laravel bằng curl.
Học lập trình React JS trong vòng 5 phút.
Sử dụng trình soạn thảo CKeditor tích hợp CKFinder với Laravel.
Hướng dẫn cài đặt Apache, PHP, MySQL, PHPMyAdmin trên Windows 10 và cấu hình SendMail.
Các tin cũ hơn:
Cách sử dụng thẻ Struts .
Phân đoạn bảng theo chiều dọc.
Tạo ActiveX và ứng dụng bằng VC++.
Tìm hiểu về cột IDENTITY.
Kiểm soát Transaction trong SQL Server.