Lazy media
Lazyload is an indispensable feature in website optimization. We use the library (lazysizes) to create lazyload effects for images & iframes. Check my example as bellow for
<img tag before & after lazy loaded:<!-- before -->
<img src="/wp-content/uploads/2020/04/7476274750363710967-1.png">
<!-- after -->
<img loading="lazy" class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/wp-content/uploads/2020/04/7476274750363710967-1.png">
If you wish to remove lazy feature on some images or iframe, please use this hook:
add_filter('hpp_should_defer_media_in_text', function($pass, $str){
if(strpos($str, 'xx')!==false) return false;
return $pass;
}, 10, 2);
You known the video is loaded through iframe when page loaded, this is taboo in website optimization. Instead of displaying the Youtube embed code, we will only display the thumbnail of the video with the play button in the middle.
However, many people do not want to use this optimally, meaning they want to keep the iframe tag. You can disable this feature with the following code:
//turn off lazy for all video
add_filter('hpp_allow_lazy_video', '__return_false');
/**
*@param $ok - 0/false: disable lazy
*@param $str - embed code
*/
add_filter('hpp_allow_lazy_video', function($ok, $str){
return $ok;
}, 10,2);
Alternatively, you may want to tweak the video embed code in your own way. With help of the hook named
oembed_result add_filter('oembed_result', function($iframe_html, $video_url, $frame_attributes){
//leave iframe tag but use lazyload feature
return hpp_lazy_video($iframe_html, 2);
}, 20, 3);
custom Lazysizes library. see example:
//add simple support for <picture class='lazy'><img:
document.addEventListener('lazybeforeunveil', function(e){
var i,img = e.target.getElementsByTagName('img');
for(i=0;i< img.length;i++){
img[i].classList.add('lazy')
}
});
//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-src');
if(bg && e.target.tagName.toLowerCase()=='a'){
e.target.style.backgroundImage = 'url(' + bg + ')';
}
});
Disallow lazyload for specific tag.
add_filter('hpp_disallow_lazyload', function($ok, $tag){
//class,src,srcset,.. ->attributes
if(strpos($tag, 'logo.png')!==false) return 1;
return $ok;
},10,2);
add_filter('hpp_disallow_lazyload_attr', function($ok, $attr){
if(strpos($tag['src'],'logo.png')!==false) return 1;
return $ok;
},10, 2);
Last modified 2yr ago