WordPress.org

Ready to get started?Download WordPress

Forums

BJ Lazy Load
Adding preload image script for fadein effect (2 posts)

  1. Geet Jacobs
    Member
    Posted 1 year ago #

    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
    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/

  2. Bjørn Johansen
    Member
    Plugin Author

    Posted 1 year ago #

    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-

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.