{"id":24855,"date":"2024-03-16T03:58:31","date_gmt":"2024-03-16T03:58:31","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/"},"modified":"2024-03-22T04:45:31","modified_gmt":"2024-03-22T04:45:31","slug":"example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/","title":{"rendered":"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions"},"content":{"rendered":"<p>jQuery lazy loading plugin jquery.lazyload.js is a plugin used to delay the loading of images. When the page scrolls to a specific position, the images will then load, effectively improving page loading speed and user experience. Below is an example of how to use it:<\/p>\n<p>First, include the source files of the jQuery library and the jquery.lazyload.js plugin in the HTML page.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"jquery.lazyload.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Next, add the &#8220;lazyload&#8221; class and the &#8220;data-src&#8221; attribute to the images that need to be loaded lazily, with the &#8220;data-src&#8221; attribute specifying the actual address of the image.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"lazyload\"<\/span> <span class=\"hljs-attr\">data-src<\/span>=<span class=\"hljs-string\">\"image.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Image\"<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Next, use the jQuery ready method to initialize the lazy loading plugin.<\/p>\n<pre class=\"post-pre\"><code>$(<span class=\"hljs-variable language_\">document<\/span>).<span class=\"hljs-title function_\">ready<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  $(<span class=\"hljs-string\">\"img.lazyload\"<\/span>).<span class=\"hljs-title function_\">lazyload<\/span>();\r\n});\r\n<\/code><\/pre>\n<p>Finally, set a default placeholder image in CSS to be displayed before the actual image loads.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-selector-class\">.lazyload<\/span> {\r\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">placeholder.jpg<\/span>) no-repeat center center;\r\n}\r\n<\/code><\/pre>\n<p>In this way, when the page scrolls to the position of the image, the plugin will automatically load the image, replacing the placeholder.<\/p>\n<p>It should be noted that the lazy loading plugin also has some optional configuration options that can be adjusted according to your needs. For example, you can control the amount of preloading of images by setting the threshold.<\/p>\n<pre class=\"post-pre\"><code>$(<span class=\"hljs-string\">\"img.lazyload\"<\/span>).<span class=\"hljs-title function_\">lazyload<\/span>({\r\n  <span class=\"hljs-attr\">threshold<\/span>: <span class=\"hljs-number\">200<\/span> <span class=\"hljs-comment\">\/\/ \u63d0\u524d200\u50cf\u7d20\u52a0\u8f7d\u56fe\u7247<\/span>\r\n});\r\n<\/code><\/pre>\n<p>Furthermore, the plugin also offers various event callback functions that allow for custom operations to be executed before, during, and after loading. For detailed configuration and usage instructions, please refer to the official documentation of jquery.lazyload.js.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery lazy loading plugin jquery.lazyload.js is a plugin used to delay the loading of images. When the page scrolls to a specific position, the images will then load, effectively improving page loading speed and user experience. Below is an example of how to use it: First, include the source files of the jQuery library and [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-24855","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Example of using the jQuery lazy load plugin jquery.lazyload.js instructions - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions\" \/>\n<meta property=\"og:description\" content=\"jQuery lazy loading plugin jquery.lazyload.js is a plugin used to delay the loading of images. When the page scrolls to a specific position, the images will then load, effectively improving page loading speed and user experience. Below is an example of how to use it: First, include the source files of the jQuery library and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T03:58:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T04:45:31+00:00\" \/>\n<meta name=\"author\" content=\"Emily Johnson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Johnson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\"},\"author\":{\"name\":\"Emily Johnson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\"},\"headline\":\"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions\",\"datePublished\":\"2024-03-16T03:58:31+00:00\",\"dateModified\":\"2024-03-22T04:45:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\"},\"wordCount\":234,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\",\"name\":\"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T03:58:31+00:00\",\"dateModified\":\"2024-03-22T04:45:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\",\"name\":\"Emily Johnson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"caption\":\"Emily Johnson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/","og_locale":"en_US","og_type":"article","og_title":"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions","og_description":"jQuery lazy loading plugin jquery.lazyload.js is a plugin used to delay the loading of images. When the page scrolls to a specific position, the images will then load, effectively improving page loading speed and user experience. Below is an example of how to use it: First, include the source files of the jQuery library and [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T03:58:31+00:00","article_modified_time":"2024-03-22T04:45:31+00:00","author":"Emily Johnson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Emily Johnson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/"},"author":{"name":"Emily Johnson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378"},"headline":"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions","datePublished":"2024-03-16T03:58:31+00:00","dateModified":"2024-03-22T04:45:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/"},"wordCount":234,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/","url":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/","name":"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T03:58:31+00:00","dateModified":"2024-03-22T04:45:31+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/example-of-using-the-jquery-lazy-load-plugin-jquery-lazyload-js-instructions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Example of using the jQuery lazy load plugin jquery.lazyload.js instructions"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378","name":"Emily Johnson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","caption":"Emily Johnson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=24855"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24855\/revisions"}],"predecessor-version":[{"id":58915,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24855\/revisions\/58915"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=24855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=24855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=24855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}