How to Speed Up Page Loading With Lazy Loading JQuery and JavaScript
In today’s lesson we will be learning how to decrease loading time on web applications with a number of videos.
Usually the way things work is that a page, along with its content loads at a given speed, but nothing on the page is usable until the application is fully loaded. What we are going to be doing is load the page without any videos, and then when a video is requested by the user to view, it will load on its own, separately from the page.
First we will need to create a new project to work in. We will need an image of the video. I have taken the time to include a download link to the source code with the images and links as well.
What the code will be doing is surrounding the video with an anchor tag. Then, the video will be commented out within the anchor tag. We will set the background property of the anchor tag equal to a picture of the video.
What this is going to do with either a little JQuery magic, or plain Jane JavaScript is on the anchor tag click event we will be doing is finding and removing the Comment out characters and replacing it with an empty string.
That’s the JQuery and below is the Plain JavaScript.
And there you have it, and this can be done with as many videos as you like. If you have any other questions or concerns and have not yet downloaded the source code for this project, I strongly suggest doing so. Seeing it in its entirety can help clear up many of your questions. Thank you for your time and I hope this has been helpful, take care.
Usually the way things work is that a page, along with its content loads at a given speed, but nothing on the page is usable until the application is fully loaded. What we are going to be doing is load the page without any videos, and then when a video is requested by the user to view, it will load on its own, separately from the page.
First we will need to create a new project to work in. We will need an image of the video. I have taken the time to include a download link to the source code with the images and links as well.
What the code will be doing is surrounding the video with an anchor tag. Then, the video will be commented out within the anchor tag. We will set the background property of the anchor tag equal to a picture of the video.
I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
Code Block
HTMLPage.htm
Anchor Tag With Image<a href="http://www.youtube.com/watch?v=UmN5JJkXPiE" class="video-in-link"
style="background:url(video1.png); width:425px; height:344px; display:block; margin: 0 auto">
<!--
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/UmN5JJkXPiE?fs=1&autoplay=1"></param>
<param name="wmode" value="transparent"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/UmN5JJkXPiE?fs=1&autoplay=1"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="425" height="344" wmode="transparent"></embed>
</object>
-->
</a>
Code Block
HTMLPage.htm
JQuery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("a.video-in-link").one('click', function () {
var anchor = $(this);
anchor.html(anchor.html().replace('<!--', '').replace('-->', ''));
anchor.removeAttr('href');
return false;
})
})
//]]>
</script>
Code Block
HTMLPage.htm
JavaScript<script type="text/javascript">
//<![CDATA[
function videoInLink(anchor) {
anchor.innerHTML = anchor.innerHTML.replace('<!--', '').replace('-->', '');
anchor.removeAttribute('href');
anchor.onclick = null;
return false;
};
//]]>
</script>
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!
LazyLoadingJQueryTut.zip