Writing JavaScript can be a fun and challenging experience. Improving the performance of your website can also be an equally rewarding. You may have noticed that images on websites can be heavy and slow, but they don’t need to effect our initial page rendering. In this screencast we’ll take a look at how to best lazyload an image to speed up the performance of your site.
you can find this demo on CodePen.
jwplayer(“video-5819”).setup({
image: “https://d3rj1gznkm47xj.cloudfront.net/99683078-3f4a-4b1d-b691-8060804b6e00.png”,
sources: [
{
file: “https://d3rj1gznkm47xj.cloudfront.net/6702d7ab8ecc21f6f2445e34e9ae2816.mp4”,
label: “SD”
},
{
file: “https://d3rj1gznkm47xj.cloudfront.net/ac512738bfd65ef0b42f8b17e45fb8ae.mp4”,
label: “HD”
},
],
tracks: [
{
file: “http://djdvv9xnh2mt5.cloudfront.net/8418123d-d674-4df2-aad3-8649b3667c19.srt”,
“default”: true
}
],
aspectratio: “16:9”,
width: “100%”,
height: “480px”,
fallback: true,
primary: “flash”,
streaming: false,
analytics: {
enabled: false,
cookies: false
},
captions: {
back: false,
fontsize: 12
},
advertising: {
client: “googima”,
schedule: {
“myAds”: {
“offset”: “pre”,
“tag”: “https://pubads.g.doubleclick.net/gampad/ads?sz=855x483u0026iu=/7448792/Videou0026cust_params=[post_id]%3Dstaging%26channel%3D[channel]u0026impl=su0026gdfp_req=1u0026env=vpu0026output=xml_vast2u0026unviewed_position_start=1u0026url=[url]/u0026description_url=[description_url]u0026correlator=[timestamp]”
}
}
}
});
Continue reading %Watch: Loading Images the Lazy Loading Way%
Source: SitePoint