If your site is loading slow then then main causes could be heavy images. So if you remove those images then your site load fast. but if those images are the main features of your product or web site then you will not remove those images. So what will you do?
Load those images one by one on demand then it will make difference when loading site.
So the solution is lazy load image will help you to load your site fast.
To implement lazy load image you need to download jquery.js and jquery.lazy.js from jquery site
I have made three methods to load image lazy, Use one method from below 3 methods:
// Method 1
jQuery(document).ready( function() { jQuery("img.lazy").lazy( {
effect: "fadeIn",
effectTime: 1500 ,
enableThrottle: true,
throttle: 250
}
);
}
);
// Method 2
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });
//Method 3
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.js"></script>
<script>
jQuery(document).ready( function() { jQuery("img.lazy").lazy( {
effect: "fadeIn",
effectTime: 1500 ,
enableThrottle: true,
throttle: 250
}
);
}
);
// alternative 1
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });
// alternative 2
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });
</script>
</head>
<body>
<img class="lazy" data-src="1.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="2.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="3.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="4.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="5.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /><img class="lazy" data-src="23.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="24.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="25.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
<img class="lazy" data-src="26.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="27.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="28.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="29.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="30.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="31.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="32.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /></body>
</html>
Load those images one by one on demand then it will make difference when loading site.
So the solution is lazy load image will help you to load your site fast.
To implement lazy load image you need to download jquery.js and jquery.lazy.js from jquery site
I have made three methods to load image lazy, Use one method from below 3 methods:
// Method 1
jQuery(document).ready( function() { jQuery("img.lazy").lazy( {
effect: "fadeIn",
effectTime: 1500 ,
enableThrottle: true,
throttle: 250
}
);
}
);
// Method 2
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });
//Method 3
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });
Use in HTML as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.js"></script>
<script>
jQuery(document).ready( function() { jQuery("img.lazy").lazy( {
effect: "fadeIn",
effectTime: 1500 ,
enableThrottle: true,
throttle: 250
}
);
}
);
// alternative 1
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });
// alternative 2
//jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });
</script>
</head>
<body>
<img class="lazy" data-src="1.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="2.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="3.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="4.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="5.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /><img class="lazy" data-src="23.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="24.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="25.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
<img class="lazy" data-src="26.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="27.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="28.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="29.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="30.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="31.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="32.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /></body>
</html>
Posts
0 comments:
Post a Comment