Hướng dẫn defer loading css (lazy loading css) với javascript

06-09-2015 16:18:54
by:

Tiếp tục với series load lười Baobinh.net xin được hướng dẫn các bạn lazy loading css cho website hay còn gọi là defer loading css hay async loading css. Bài này sẽ giúp các bạn hiểu được tại sao nên dùng defer loading css, cách sử dụng như thế nào.

Trước tiên thì chúng ta lại quay lại với việc giải thích lazy loading css:
- Là cách làm chậm quá trình load file css lại với mục đích nhằm tăng tốc độ load nội dung trang web lên. Thường sử dụng kết hợp với lazy loading image để tăng tốc độ và tối ưu việc hiển thị nội dung web cho những website có lượng người dùng đông đảo.
- Nhược điểm của Lazy loading css là có thể khiến cho hiển thị của website không được đẹp ngay khi lúc người dùng vừa vào site vì lúc đó css chưa được Javascript load ra. Đây là một thủ thuật lập trình tối ưu website cho những web có traffic lớn.

Giờ chúng ta sẽ đi vào code:

<!DOCTYPE html>
<html>
    <head>
        <title>Demo Lazy loading css </title>
        <meta charset="UTF-8">
        <meta name="description" content="Hôm nay Baobinh.net xin được viết một bài giới thiệu về việc lazy loading css với javascript để các bạn hiểu tại sao nên sử dụng lazy loading css và cách làm cho website của mình." >
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="HTML, CSS, HTML5, CSS 3, JavaScript, dạy html, học html">
        <meta name="author" content="Tiểu Long Lanh">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/lazyload.js"></script>

    </head>
    <body style="width: 1000px; margin: auto; background-color: #fff">
        <div style="float: left; width: 1000px; background-color: #000000">
			<h1>Demo Lazy loading images</h1>
			<!-- Div tags và images ở đây được dùng css từ file css/style.css file này không hề được load ngay từ đầu -->
			<div class="element">				
				<img src="images/1.png" />
				<img src="images/1.png" />
				<img src="images/1.png" />
			</div>
        </div>
		
    </body>
</html>

Tiếp theo, chúng ta tạo 2 file lazyload.js ở trong folder js và style.css ở trong folder css với nội dung sau:

File CSS:

img {
	width:580px; 
	height:304px;
	float: left;
	margin-left: 50px;
	margin-bottom: 20px;
}
.element {
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	width: 100%;
}

h1 {
	color: white;
}

File JS:

    $(document).ready(function(){
 
		if($(".element").size()>0){
            if (document.createStyleSheet){
                document.createStyleSheet('css/style.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='css/style.css' type='text/css' media='screen' />"));
            }
        }
    });

Bây giờ chúng ta cùng xem thành quả tại Demo của baobinh.net

Download file code mẫu tại đây
Mật khẩu: baobinh.net

Xem thêm: CSS3 CSS 3 Jquery Javascript

Posted by
2015-09-06 16:12:03

Danh Mục Lập Trình

Baobinh.net

Hướng dẫn - Thủ thuật

Hướng dẫn defer loading css (lazy loading css) với javascript

Danh Mục Lập Trình

Bài viết ngẫu nhiên

Danh mục lập trình