top



Couls someone provide me the code for the lazy load for images

I'm going to apply it for blogger.

Could you also add a Fade In effect

1. Paste this script where template of your blogger
The JS:

Spoiler:
Code:
/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *  http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.4.0
 *
 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect      : "show",
            container    : window
        };
               
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                var counter = 0;
                elements.each(function() {
                    if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
       
        return this.each(function() {
            var self = this;
            /* TODO: use .data() instead of .attr() */
            $(self).attr("original", $(self).attr("src"));
            if ("scroll" != settings.event
                        || $.belowthefold(self, settings)
                        || $.rightoffold(self, settings)) {
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);     
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
           
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });

    };

    /* Convenience methods in jQuery namespace.          */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        }
        else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
   
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        }
        else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
   
    /* Custom selectors for your convenience.  */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"  : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
   
})(jQuery);
2. and this code to call it:
Code:
<script type="text/javascript" charset="utf-8">
  $(function() {         
      $("img").lazyload({
        placeholder : "http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",
        effect      : "fadeIn",
        threshold  :"-50"
      });
  });
</script>

Hope it works Smile

Could i upload the first code to a host or put it in my forum instead

Edit: I was thinking of applying it to my forum PHPBB3 of forumotion

i've uploaded the JS to my hosting:

http://axtrixtptf.webs.com/JS/Lazy%20Loader

what do i do

Yah sure, you can host it on forumotion forum, but remember to change the dollar sign to jQuery (word) and then link it by the script tag:

Code:
<script src="http://www.YOURFORUM.com/h1-"></script>
Replace the 1 with the page ID/number Smile

I dont understand what you say about the dollar sign. I dont know jqury only html and CSS. Could you explain abit more.

hahaha, like me too, when i asked him about the dollar sign..but he told me already how...
you can see a bunch of $ in the code, and what you need to do is to replace them by the word 'jquery'
save it and link it to the page you want it to be..
<script type=text/javascript src=http://www.YOURFORUM.com/h#-titleofthepage>

replace the highlighted word with the html # and title of the html..

i hope you understand what we mean..
am i right gangstar?

yes ur right spixy

Hmm not 100% Happy

Code:
http://www.YOURFORUM.com/h#-
replace the # with the page ID/number Smile
you don't need the title Smile
just the ID/number of the page Smile

omg that why my jquery wasnt work...

Code:
    /*
    * Lazy Load - jQuery plugin for lazy loading images
    *
    * Copyright (c) 2007-2009 Mika Tuupola
    *
    * Licensed under the MIT license:
    *  http://www.opensource.org/licenses/mit-license.php
    *
    * Project home:
    *  http://www.appelsiini.net/projects/lazyload
    *
    * Version:  1.4.0
    *
    */
    (function($) {

        $.fn.lazyload = function(options) {
            var settings = {
                threshold    : 0,
                failurelimit : 0,
                event        : "scroll",
                effect      : "show",
                container    : window
            };
                 
            if(options) {
                $.extend(settings, options);
            }

            /* Fire one scroll event per scroll. Not one scroll event per image. */
            var elements = this;
            if ("scroll" == settings.event) {
                $(settings.container).bind("scroll", function(event) {
                    var counter = 0;
                    elements.each(function() {
                        if (!$.belowthefold(this, settings) &&
                            !$.rightoffold(this, settings)) {
                                $(this).trigger("appear");
                        } else {
                            if (counter++ > settings.failurelimit) {
                                return false;
                            }
                        }
                    });
                    /* Remove image from array so it is not looped next time. */
                    var temp = $.grep(elements, function(element) {
                        return !element.loaded;
                    });
                    elements = $(temp);
                });
            }
         
            return this.each(function() {
                var self = this;
                /* TODO: use .data() instead of .attr() */
                $(self).attr("original", $(self).attr("src"));
                if ("scroll" != settings.event
                            || $.belowthefold(self, settings)
                            || $.rightoffold(self, settings)) {
                    if (settings.placeholder) {
                        $(self).attr("src", settings.placeholder);   
                    } else {
                        $(self).removeAttr("src");
                    }
                    self.loaded = false;
                } else {
                    self.loaded = true;
                }
             
                /* When appear is triggered load original image. */
                $(self).one("appear", function() {
                    if (!this.loaded) {
                        $("<img />")
                            .bind("load", function() {
                                $(self)
                                    .hide()
                                    .attr("src", $(self).attr("original"))
                                    [settings.effect](settings.effectspeed);
                                self.loaded = true;
                            })
                            .attr("src", $(self).attr("original"));
                    };
                });

                /* When wanted event is triggered load original image */
                /* by triggering appear.                              */
                if ("scroll" != settings.event) {
                    $(self).bind(settings.event, function(event) {
                        if (!self.loaded) {
                            $(self).trigger("appear");
                        }
                    });
                }
            });

        };

        /* Convenience methods in jQuery namespace.          */
        /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

        $.belowthefold = function(element, settings) {
            if (settings.container === undefined || settings.container === window) {
                var fold = $(window).height() + $(window).scrollTop();
            }
            else {
                var fold = $(settings.container).offset().top + $(settings.container).height();
            }
            return fold <= $(element).offset().top - settings.threshold;
        };
     
        $.rightoffold = function(element, settings) {
            if (settings.container === undefined || settings.container === window) {
                var fold = $(window).width() + $(window).scrollLeft();
            }
            else {
                var fold = $(settings.container).offset().left + $(settings.container).width();
            }
            return fold <= $(element).offset().left - settings.threshold;
        };
     
        /* Custom selectors for your convenience.  */
        /* Use as $("img:below-the-fold").something() */

        $.extend($.expr[':'], {
            "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
            "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
            "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
            "left-of-fold"  : "!$.rightoffold(a, {threshold : 0, container: window})"
        });
     
    })(jQuery);

Soy i need to replace all the $ signs?

And about blogger. I need to link it to the page with the JS?

I had followed this tutorial: http://www.bloggertipandtrick.net/2010/05/add-jquery-lazy-load-plugin-to-blogger.html
But it didnt work.

Everything is ready and hosted in that tutorial, nice then Smile
can i see your blog,

I can't find any script for the lazy load.

I dont have it now because i took it.

The problem is that it doesnt work.

Could you give me the code to link it and to make it work for Forumotioin and Blogger.

:/ i gave the one that u used for forumotion, never tried it on blogger before :/
But you also don't have images, it only works when you scroll down Smile

So the one for forumotion y only need to put it on an html page and thats it.

Hm.. you should read the previous posts in this topic Smile

I've read them.

I've created two pages, one with the first code and one with the second code.

Which page should I link in my forums descrption.

I use PHPBB3

use the announcements
link them both Smile

Im lost.


Ok i create the page with the large code:
www.todoparatuforo.com/h5-lazy-loader
So i link it:

Code:
<script src=/h5-lazy-loader></script>

Later in an announcement i put the call in code. But it doesnt work still.

use this instead.

Code:
<script type="text/javascript"  src="/h5-"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {         
      $("img").lazyload({
        placeholder : "http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",
        effect      : "fadeIn",
        threshold  :"-50"
      });
  });
</script>

Doesnt work still:

http://www.todoparatuforo.com/forum

It breaks my forums design

[locked]