search

dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 355 forks source link

How to integrate in wordpress? #138

Open petrk94 opened 7 years ago

petrk94 commented 7 years ago

Hello, I would like to know how I can integrate it in my wordpress website? Is there something what I need to care of or just put in the js folder? Exist a plugin for that to minimize the work? I have a team which is creating content on this page, but it is impossible to tell everyone what they need to put for a code as custom HTML part in the page.

Would be glad if someone could help. Thanks

unnamedfeeling commented 7 years ago

Hey @petrk94 All you need to do is:

  1. enqueue this minified script in your theme BEFORE your main script file
  2. put something like var Blazy=new Blazy(); in the beginning of your main script file
  3. add a class "b-lazy" to all images you want to lazyload
  4. replace "src" attributes with "data-src" and add some little dummy image to src attribute

You should end up with something like this: <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/assets/img/group/cake.png" alt="cake" class="group__img b-lazy"> This image will lazyload just before user scrolls onto it.

petrk94 commented 7 years ago

@unnamedfeeling is there a tutorial how to make it the right way? doesnt seems to be easy to realize :/

unnamedfeeling commented 7 years ago

@petrk94 I personally found tutorials on the official site - http://dinbror.dk/blog/blazy and googled alot to get it working. Official site did not give me 100% answers for all my questions but it was a good starting point. My results are - 60MB > 3MB (of initial page size) mostly with the help of this plugin. You will end up with implementing something like i wrote you about before - give it a try. Or you could try one of these - https://premium.wpmudev.org/blog/6-lazy-load-plugins-to-make-your-wordpress-site-faster/ I dont know your situation - as for me - plugin was not an option. PS I am working on moving client`s site from yii > wp an it was terribly slow and unoptimized. I have achieved most of results only by compressing images via tinypng.

zakirsajib commented 6 years ago

<?php the_post_thumbnail( 'full', array( 'alt' => the_title_attribute( array('echo' => false)), 'class' => 'b-lazy', 'data-src'=> 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' ) ); ?>

unnamedfeeling commented 6 years ago

As of current time i can tell that using a base64 encoded images as preloaders for many images is bad idea - all of the images are decoded on the fly every time browser loads the page and are not cached. The best way to load transparent image i found is 1x1px gif image - smallest size, lightest impact processor (and paint time) and cacheability.

@zakirsajib src sould be the placeholder and the data-src should contain your image. Your example won`t work((( I ended up on a custom wp-based function for this