emn178 / jquery-lazyload-any

A jQuery plugin provides a lazyload function for images, iframe or anything.

jQuery-lazyload-any

A jQuery plugin provides a lazyload function for images, iframe or anything.

Demo

Images (Overflow and Tabs)
Youtube

Download

Compress
Uncompress

Installation

You can install jquery-lazyload-any by using Bower.

bower install jquery-lazyload-any

For node.js, you can use this command to install:

npm install jquery-lazyload-any

Usage

HTML
Attribute Style

<div id="you-want-lazyload" data-lazyload="&lt;p&gt;Anything you want to lazyload&lt;/p&gt;">
</div>

Script Style

<div id="you-want-lazyload">
  <script type="text/lazyload">
    <p>Anything you want to lazyload</p>
  </script>
</div>

Comment Style

<div id="you-want-lazyload">
  <!--
    <p>Anything you want to lazyload</p>
  -->
</div>

JavaScript

$('#you-want-lazyload').lazyload(options);

You should choose only one style. When multiple styles set, priority is Attribute > Script > Comment.

Options

threshold: Number (default: 0)

Sets the pixels to load earlier. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport. It should be greater or equal zero.

load: Function(element) (default: undefined)

Sets the callback function when the load event is firing.

element: The content in lazyload tag will be returned as a jQuery object.

trigger: String (default: "appear")

Sets events to trigger lazyload. Default is customized event appear, it will trigger when element appear in screen. You could set other events including each one separated by a space, ex: mousedown touchstart.

Methods

$.lazyload.check()

Force to trigger detection event.

$.lazyload.setInterval(inverval)

Set interval of timer that check container display status.

inverval: Number (default: 50)

Interval of timer. Set 0 to disable timer, and you can use $.lazyload.check() to trigger detection manually.

$.lazyload.refresh(selector)

Refresh status of elements bound event. Element will bind scroll event to parent scrollable automatically when initializing as lazyload. If you move element, you should use this method to bind again.

selector: String or Object (default: undefined)

The elements that you want to refresh. It will refresh all lazyload elements if you don't pass this parameter.

Notice

• You should initialize after the element add to page. Or it can't detect whether it's in screen. If you do that, you still can use $.lazyload.check() to force detection.
• Detection uses jQuery element.is(':visible'), it will return false if element's width and height are equal to zero. So you have to make sure the lazyload element with any width or height.

Example

HTML

<div class="lazyload">
  <!--
    <img src="image.png" />
  -->
</div>

JavaScript

$('.lazyload').lazyload({
  // Sets the pixels to load earlier. Setting threshold to 200 causes image to load 200 pixels
  // before it appears on viewport. It should be greater or equal zero.
  threshold: 200,

  // Sets the callback function when the load event is firing.
  // element: The content in lazyload tag will be returned as a jQuery object.
  load: function(element) {},

  // Sets events to trigger lazyload. Default is customized event `appear`, it will trigger when
  // element appear in screen. You could set other events including each one separated by a space.
  trigger: "appear"
});

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/jquery-lazyload-any
Author: Yi-Cyuan Chen ([email protected])

jquery-lazyload-any's Issues

How to retain scroll position when redirected back to the page?

Hello there,

I really like your plugin and easy usability it provides. I have to make this plugin better by retaining the scroll postilion once we press back from the browser and land back to the listing with the lazyload after we have viewed one of the records from it.

What i have brainstormed as far is on unload of the window when a record is clicked, i save the scroll position in local storage and then when i redirect back i check for the scroll position existence in local storage and remap the position according to the value. But as this page has lazyload the section is hidden and it doesnt open up. I want to disable the lazyload in this case. Is there any way i could achieve this with this plugin?

I will greatly appreciate your opinion.
Thanks alot

ie8 FF inserting-a-comment-in-innerhtml error

http://stackoverflow.com/questions/15006001/inserting-a-comment-in-innerhtml

$.lazyload functions doesn't do anything

Calling of
$.lazyload.check() or $.lazyload.setInterval(100000000) doesn't seem to has any effect. Whats the proper way to use that?

I have

$('.lazyload-thumbnail').lazyload({
	load: function(img) {
		console.log("loading")
		img.fadeOut(0, function() {
    img.fadeIn(1000);
  	});
	}
});

If I scroll down I am getting image loaded as expected. If I call $.lazyload.check() nothing happens. Whats wrong?

JQuery Compatability

Hello, is jquery-lazyload-any plugin compatible with jquery-3.3.1, because it seems not to be working when I run my code.

Getting error intermediate value is not a function

getting error " intermediate value is not a function" when merge and minify the this js file with another files using gulp.

Need Help: How can I make a lazyload for div contents text?

Dear Mr. or Miss,
I am interested in your plugin, and currently I use this awesome plugin.
I would like to know how to make a lazyload for div contents text as the example code above (I don't now how to use in this plugin for text). Could you guide how to produce?
This code image just my imagine idea.

Raw code: http://notepad.cc/fleruky33
Thanks you :)

Can I show all?

After clicked save a form, I need to load all (show all) commented tags for saving.
Can I do it?

Must I use "<!-- -->" to lazyload something?

Why dont use "data-original" attr like jquery lazyload. It may be in conflict.

Trying to combine Isotope with Lazyload

I am working on a project where I am using Isotope to search and filter blocks of content on a page similar to what is here(https://codepen.io/desandro/pen/wfaGu). The page is very image heavy so I was hoping to leverage your plugin to lazy load the content. The issue I run into is when I perform a search in order to filter and the content is brought to the top of the page the content is still commented out. If I scroll down to the content which I am commenting out it works just fine. Is there a simple fix for this where you can point me in the right direction?

Reverse LazyLoad Action? Refresh?

Hi,
I'm creating a page that auto loads videos and animated gifs as I scroll. LazyLoad-any works great for this. For performance and memory savings, I'd like to reverse the process when the user scrolls past the content.

I have code to convert the content back to the original 'lazy' format when off screen, something like:

$('#content-xxx .content').html('<div class="lazy"><!--'+$('#content-xxx .content').html()+'--></div>');

This works fine but I'm confused how to then tell lazyLoad to refresh and allow the content to load again when scrolled to. I've tried:

$('.lazy').lazyload().refresh()

This seems to work but I get a JS error when I trigger it:

TypeError: undefined is not a function (evaluating '$('.lazy').lazyload().refresh()')
column: 126
line: 1
message: "undefined is not a function (evaluating '$('.lazy').lazyload().refresh()')"
stack: "eval code↵eval@[native code]↵_evaluateOn↵_evaluateAndWrap↵evaluate"
__proto__: Error

Also tried:

$.lazyload.refresh('.lazy');

Also works, though i get JS errors whenever an element appears:

[Error] TypeError: undefined is not an object (evaluating 'b.load')
    w (jquery.lazyload-any.min.js, line 2)
    dispatch (jquery-1.11.2.min.js, line 3)
    handle (jquery-1.11.2.min.js, line 3)
    trigger (jquery-1.11.2.min.js, line 3)
    (anonymous function) (jquery-1.11.2.min.js, line 3)
    each (jquery-1.11.2.min.js, line 2)
    each (jquery-1.11.2.min.js, line 2)
    trigger (jquery-1.11.2.min.js, line 3)
    n (jquery.lazyload-any.min.js, line 1)
    each (jquery-1.11.2.min.js, line 2)
    each (jquery-1.11.2.min.js, line 2)
    g (jquery.lazyload-any.min.js, line 2)
    dispatch (jquery-1.11.2.min.js, line 3)
    handle (jquery-1.11.2.min.js, line 3)

What is the correct format to do this?

Integrating on background-image css element

Hi,

I'm using my images inside "background-image" css element:

<a class="home" style="background-image:url('http://www.example.dev/images/img123.jpg')" href="/test/test1"></a>

So I would like to know if it's possible to apply this library to "background-image" css element.

Thanks.

Not working on firefox

I'm trying to use lazyload to load a doubleclick ad but it doesn't work on Firefox and IE, only in chrome.

this is my doubleclick container

this is the lazyload initializing code

this is the code on chrome

this is the code on Firefox or IE

I have no idea of what's happening

Nice scroll

Excellent plugin, however I'm struggling getting it to work with the jquery nicescroll plugin.

Do you know why the elements would stop firing with it?

Example for lazyload div

You have more examples of how to lazy load an entire div

Float div won't work

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="./jquery.lazyload-any.min.js"></script>
  </head>
  <body>
    <div class="lazyload">
<!--
	 <div id="widget-1" style="height: 400px; border: 1px solid #ccc; width: 1024px; float: left;"></div>
-->
    </div>
    <div class="lazyload">
<!--
	 <div id="widget-2" style="height: 400px; border: 1px solid #ccc; width: 1024px; float: left;"></div>
-->
    </div>
    <div class="lazyload">
<!--
	 <div id="widget-3" style="height: 400px; border: 1px solid #ccc; width: 1024px; float: left;"></div>
-->
    </div>
    <div class="lazyload">
<!--
	 <div id="widget-4" style="height: 400px; border: 1px solid #ccc; width: 1024px; float: left;"></div>
-->
    </div>
    <script type="text/javascript">
      $('.lazyload').lazyload({
        load: function (elemArray) {
          for (var i = 0; i < elemArray.length; ++i) {
            var $elem = $(elemArray[i]);
            console.info('load ' + $elem.attr("id"));
            $elem.html(i+1);
          }
        }
      });
    </script>
  </body>
</html>```


When I run the code, it will show all. When I remove float style, it will work. How can I fix it? Thanks!

For iPad, It does not trigger $(element).lazyload()

I have this page https://mopixie.com/t1.html,

In Ipad, it does not load images when scrolling the page.
It triggers for once and shows images which are initially placed on view port.
Does not trigger event when scroll down !!

Any suggestions.

minified js

can you add the minified js ?
thanks

Don't bind window.onresize and window.onscroll unless lazyload is instantiated

Line 78 binds resize and scroll to window whether lazyload has been instantiated or not. Recommend moving the binding inside the function in order to optimize (scroll binding in particular can slow a site down so it should only be bound when intended).

PR: #6

lazy-loading not working in Firefox

It seems like lazyloading is not working in Firefox.

Here is a video regarding the issue in firefox.
https://www.screencast.com/t/Ni6ohm3Vcf

Thank you.

Can't get this to work on my Wordpress site, disappears on click

I'm not too jquery savvy first of all. I'm trying to replicate your YouTube demo on my Wordpress site (and eventually use it for Soundcloud iframes) but every time the image is clicked, the entire block disappears. I enqueued the jquery in functions.php:

//jQuery-lazyload-any
function lazyload_script(){
    if ( is_category() || is_single() ) {
wp_enqueue_script( 'jQuery-lazyload-any', get_stylesheet_directory_uri() . '/jquery-lazyload-any/jquery.lazyload-any.min.js', array('jquery'), '0.2.3', true );}}
add_action( 'wp_enqueue_scripts', 'lazyload_script' );

Then I added the javascript to my footer.php:

function load(img)
{
  img.fadeOut(0, function() {
    img.fadeIn(1000);
  });
}
$('.lazyload-thumbnail').lazyload({load: load});
$('.lazyload-youtube').lazyload({trigger: 'click'});

TEST PAGE: http://test.buybeatsfast.com/test-beat-lazy/

What am I doing wrong?

Add to bower.io

I wanna use bower to load this... any chance you could add it please?

initial visible images don'tt show up at page load

i'm using PHP and i'm pulling my images from the server and they don't load initially (on page load). There are some images that should be visible on screen on page load and they don´t show up until i star scrolling.

Any thoughts on that ?

Add to npm

Would be nice :)

Lazy load carousel images

How to make it work inside my slider? It only works with the initial image, but when I slide to the other images it doesnt show

Thx