Title: Adding preload image script for fadein effect
Last modified: August 20, 2016

---

# Adding preload image script for fadein effect

 *  [Geet Jacobs](https://wordpress.org/support/users/geetjacobs/)
 * (@geetjacobs)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/adding-preload-image-script-for-fadein-effect/)
 * Thanks for the great plugin!
 * I wanted to have the images you see in your view area on page load to fadein 
   after the image loaded.
 * With some very simple changes I was able to edit the plugin to do so.
 * I used the imageLoaded plugin (very small!) [https://github.com/desandro/imagesloaded](https://github.com/desandro/imagesloaded)
   
   1. Added jquery.imagesloaded.min.js to the js folder
 * 2 . Added a wp_enqueue_script to the “bj-lazy-load.php” page.
    `wp_enqueue_script('
   jquery.imagesloaded', plugins_url( '/js/jquery.imagesloaded.min.js', __FILE__),
   array( 'jquery' ), self::version, $in_footer );`
 * 3. Finally I added a very small bit of jquery to the “bj-lazy-load.js” file. _(
   after that minifying it and copying it to the “bj-lazy-load.min.js”)_
 * **Changed the code from:**
 *     ```
       $el.hide()
       	.attr( 'src', imgurl )
       	.removeClass( 'lazy-hidden' )
       	.fadeIn();
       ```
   
 * **to:**
 *     ```
       $el.hide()
       	.attr( 'src', imgurl )
       	.removeClass( 'lazy-hidden' )
       	.imagesLoaded(function() {
       			$el.fadeIn();
       	});
       ```
   
 * Hopefully this might be added to the plugin as it doesn’t add any load time and
   also adds a nice feature.
 * [http://wordpress.org/extend/plugins/bj-lazy-load/](http://wordpress.org/extend/plugins/bj-lazy-load/)

Viewing 1 replies (of 1 total)

 *  Plugin Author [Bjørn Johansen](https://wordpress.org/support/users/bjornjohansen/)
 * (@bjornjohansen)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/adding-preload-image-script-for-fadein-effect/#post-3565537)
 * Thanks for the input 🙂
 * Adding another JS-file does affect the total page load performance, but this 
   can be done fairly easy without an external resource.
 * I believe this feature will be added in the near future 🙂
 * -B-

Viewing 1 replies (of 1 total)

The topic ‘Adding preload image script for fadein effect’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/bj-lazy-load_9084ba.svg)
 * [BJ Lazy Load](https://wordpress.org/plugins/bj-lazy-load/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/bj-lazy-load/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/bj-lazy-load/)
 * [Active Topics](https://wordpress.org/support/plugin/bj-lazy-load/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/bj-lazy-load/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/bj-lazy-load/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Bjørn Johansen](https://wordpress.org/support/users/bjornjohansen/)
 * Last activity: [13 years, 3 months ago](https://wordpress.org/support/topic/adding-preload-image-script-for-fadein-effect/#post-3565537)
 * Status: not a support question