{"id":104324,"date":"2019-05-21T02:28:44","date_gmt":"2019-05-21T02:28:44","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/native-image-lazy-loading\/"},"modified":"2019-05-21T02:28:44","modified_gmt":"2019-05-21T02:28:44","slug":"native-image-lazy-loading","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/native-image-lazy-loading\/","author":8372340,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1","stable_tag":"trunk","tested":"5.2.24","requires":"4.5","requires_php":"5.1","requires_plugins":"","header_name":"Native Image Lazy Loading","header_author":"JDM Digital","header_description":"Automatically add the new `loading` attribute to images within your content to support native image lazy loading.","assets_banners_color":"464758","last_updated":"2019-05-21 02:28:44","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/jdmdigital\/JDM-Native-Lazy-Loading","header_author_uri":"https:\/\/jdmdigital.co","rating":4,"author_block_rating":0,"active_installs":20,"downloads":1573,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":"1","5":0},"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":"2091890","resolution":"128x128","location":"assets","locale":""},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":"2091890","resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":"2091890","resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":"2091890","resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.JPG":{"filename":"screenshot-1.JPG","revision":"2091890","resolution":"1","location":"assets","locale":""}},"screenshots":{"1":"The Settings Page"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[163,4884,1466,4469,247],"plugin_category":[50,54],"plugin_contributors":[171652],"plugin_business_model":[],"class_list":["post-104324","plugin","type-plugin","status-publish","hentry","plugin_tags-images","plugin_tags-lazy-load","plugin_tags-lazyload","plugin_tags-loading","plugin_tags-performance","plugin_category-media","plugin_category-security-and-spam-protection","plugin_contributors-jdm-labs","plugin_committers-jdm-labs"],"banners":{"banner":"https:\/\/ps.w.org\/native-image-lazy-loading\/assets\/banner-772x250.jpg?rev=2091890","banner_2x":"https:\/\/ps.w.org\/native-image-lazy-loading\/assets\/banner-1544x500.jpg?rev=2091890","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/native-image-lazy-loading\/assets\/icon-128x128.jpg?rev=2091890","icon_2x":"https:\/\/ps.w.org\/native-image-lazy-loading\/assets\/icon-256x256.jpg?rev=2091890","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/native-image-lazy-loading\/assets\/screenshot-1.JPG?rev=2091890","caption":"The Settings Page"}],"raw_content":"\n

This plugin adds the loading<\/code> attribute to IMG tags found when filtering the_content()<\/code> to support native image lazy loading.<\/p>\n\n

For more information about lazy loading images using this new native browser image attribute, check out this article: https:\/\/addyosmani.com\/blog\/lazy-loading\/<\/a> and for a little more depth into what we're doing here, check out our explainer post<\/a>.<\/p>\n\n

Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like LazySizes<\/a> or Vanilla-LazyLoad<\/a>) in order to defer fetching these images until a user scrolls near them. What if the browser could avoid loading these offscreen images for you?<\/p>\n\n

The loading<\/code> attribute instructs a browser to defer loading offscreen images until users scroll near them. It comes in three flavors: eager<\/strong>, auto<\/strong>, and lazy<\/strong>. Install this plugin and you can set the first image's loading attribute and the loading attribute for all the subsequent images sent through the_content()<\/code> in the plugin's settings page.<\/p>\n\n

Simple is Beautiful<\/strong><\/p>\n\n

There is no JavaScript or CSS included in the plugin. It just works in browsers that support the new loading<\/code> image attribute.<\/p>\n\n

For browsers that don't support this new image loading attribute, that's ok. You can still use whatever JavaScript-based image lazy loader you want as a fallback until browser support becomes a little more mainstream.<\/p>\n\n\n

    \n
  1. Install Native Image Lazy Loading<\/strong> from the WordPress repo<\/li>\n
  2. Activate the plugin through the Plugins<\/strong> menu<\/li>\n
  3. Configure in Settings<\/strong> >> Native Lazy Loading<\/strong><\/li>\n
  4. Marvel<\/strong> at its simplicity<\/li>\n<\/ol>\n\n\n
    \n
    Does this add any JS?<\/dt>\n

    Nope. If you're using another JS-based lazy loader, that'll just keep working as it did. If the browser doesn\\'t support the loading<\/code> attribute, it'll just ignore it and process per usual.<\/p><\/dd>\n

    Where is the Settings Page?<\/dt>\n

    In version 1.0 there wan't one, but thanks to a suggestion by @verlok<\/a>, there IS one in v1.1. You'll find it at Settings<\/strong> >> Native Lazy Loading<\/strong>.<\/p><\/dd>\n\n<\/dl>\n\n\n

    1.1<\/h4>\n\n
      \n
    • Added Settings Page<\/li>\n
    • Added Option to select the loading=\"\"<\/code> attribute<\/li>\n<\/ul>\n\n

      1.0<\/h4>\n\n
        \n
      • First release.<\/li>\n<\/ul>","raw_excerpt":"Automatically add the new loading attribute to images within your content to support native image lazy loading.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/104324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=104324"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jdm-labs"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=104324"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=104324"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=104324"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=104324"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=104324"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=104324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}