2016.10.25: New release, bLazy version 1.8.2
bLazy is a lightweight script for lazy loading and multi-serving images. It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. bLazy works on all modern browsers, including on IE7+.
Contents
- How to use bLazy
- Options
- Public functions
- Responsive Images
- Iframes, videos, unity games etc.
- With AngularJS
- Changelog (github)
- License
- Support
- More lazyload examples (link)
How to use bLazy (lazy load images)
You can lazy load your images in just two easy steps.
Step 1) Change your image markup a bit.
- Add class “b-lazy”.
- Add a placeholder image to the image source (src). In my example I’m using a base64 encoded transparent gif so it won’t do any extra requests.
- Save the real image source in the data-src attribute
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="image.jpg" alt="alt-text" />
Step 2) Include blazy.js and initialize it. If you’re using jQuery (or simliar) do it in document.ready:
<script src="blazy.js"></script> <script> ;(function() { // Initialize var bLazy = new Blazy(); })(); </script>
bLazy comes with a few options
Options– key [type] (default value) | |
breakpoints[array] (false) | Multi-serve images based on screen size. Go to multi-serve image example |
container [string](window) | If you want to lazy load elements inside a scrolling container change the default value to the selector of the container |
error [function(ele, msg)] (false) | Callback for when something goes wrong. There are two error messages, missing and invalid. You’ll get missing if no data-src is defined. Invalid if the data-src is invalid. Go to callback example |
errorClass [string](‘b-error’) | The classname an element will get if something goes wrong. |
loadInvisible [bool](false) | Set to true if you want to load invisible (hidden) elements. |
offset [int] (100) | The offset controls how early you want the elements to be loaded before they’re visible. Default is 100, so 100px before an element is visible it’ll start loading. |
root [object] (document) | The root object can be changed which adds support for web components and shadow dom. |
saveViewportOffsetDelay [int] (50) | Delay for how often it should call the saveViewportOffset function on resize. Default is 50ms. |
selector[string] (‘.b-lazy’) | Element selector for elements that should lazy load. If you want to lazy load all images write ‘img’. You can add multiple selectors separated with comma; ‘.b-lazy, .bLazy, .blazy’. |
separator [char](‘|’) | Used if you want to pass retina images: data-src=”image.jpg|image@2x.jpg”. Go to the retina image example |
src [string] (‘data-src’) | Attribute where the original element source can be found |
success [function(ele)] (false) | Callback for when an image has loaded. Go to callback example |
successClass [string](‘b-loaded’) | The classname an element will get when loaded. |
validateDelay [int](25) | Delay for how often it should call the validate function on scroll/resize. Default is 25ms. |
You pass the options as an object of key/value pairs:
// Format var bLazy = new Blazy({ key: value , key: value , key: value });
Selector
You can change the selector if you don’t want to add the ‘b-lazy’ class or if you need to have multiple.
// Example var bLazy = new Blazy({ selector: 'img' // all images });
Offset
The offset controls how early you want the elements to be loaded before they’re visible. Default is 100, so 100px before an element is visible it’ll start loading.
// Example var bLazy = new Blazy({ offset: 100 // Loads images 100px before they're visible });
Images inside a container
You can also lazy load images inside a scrolling container, just define the selector of the container:
// Example var bLazy = new Blazy({ container: '#scrolling-container' // Default is window });
Callback when image has loaded or fails
If you need to do anything when an image has loaded or fails you can pass a callback function:
// Example var bLazy = new Blazy({ success: function(ele){ // Image has loaded // Do your business here } , error: function(ele, msg){ if(msg === 'missing'){ // Data-src is missing } else if(msg === 'invalid'){ // Data-src is invalid } } });
Retina images
If you’re not doing retina-first don’t worry. It’s easy to serve retina images for retina displays. Just add the source to the retina image in the data-src by using the separator (default is ‘|’) and bLazy will do the rest:
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="image.jpg|retina-image.jpg" alt="alt-text" />
Background images
You can also lazy load background images. If the element with the lazy load class (default: ‘.b-lazy’) isn’t an image, the source will be added to the element as a background image:
<div class="b-lazy" data-src="background-image.jpg"></div>
Multi-serve images
You can multi-serve images, so users on smaller devices will get a smaller image served and the page will load faster. If you have more than one it’s important that the widths are ascending like in my example; 420 comes before 768. If you set up a multi rule but your image markup doesn’t have the src attribute on it, it’ll look after the default src, data-src.
// Example var bLazy = new Blazy({ breakpoints: [{ width: 420 // max-width , src: 'data-src-small' } , { width: 768 // max-width , src: 'data-src-medium' }] });
Image markup:
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="image.jpg" data-src-small="image-small.jpg" data-src-medium="image-medium.jpg" alt="alt-text" />
How the breakpoints works:
The breakpoints are defined by the device width not the browser width. It means that it’ll look at your screen width which won’t change when you resize your browser window.
The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the initial width of your browser window is something small I don’t want to upscale a low res image when you resize it up.
Image transitions
Image transitions are not a built-in feature in bLazy.js but you can easily add it with css. When an image has loaded a loaded class (default: b-loaded) is added to the image, so you can add:
.b-lazy { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; max-width: 100%; opacity: 0; } .b-lazy.b-loaded { opacity: 1; }
Public functions
Public functions | |
revalidate() | Revalidates document for visible images. Useful if you add images with scripting or ajax |
load(element(s), force) | Forces the given element(s) to load if not collapsed. If you also want to load a collapsed/hidden elements you can add true as the second parameter. You can pass a single element or a list of elements. Tested with getElementById, getElementsByClassName, querySelectorAll, querySelector and jQuery selector. |
destroy() | Unbind events and resets image array |
// Example var bLazy = new Blazy(); bLazy.functionName(); // eg bLazy.revalidate();
Responsive images
An example on how to lazy load and multi-serve responsive images without having the page reflow.
Markup:
<div class="image-wrapper ratio_16-9"> <img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="image.jpg" data-src-small="image-small.jpg" alt="alt-text" /> <!-- Fallback for non JavaScript browsers --> <noscript><img src="image.jpg" alt="alt-text" /></noscript> </div>
CSS:
.image-wrapper { // Adding a loader and background color. The user will see it // if the image is loading slow. background: #1E1E1E url('loader.gif') center center no-repeat; width: 100% } .ratio_16-9 { // The image has a 16/9 ratio. Until the image has loaded // we need to reserve some space so the page won't reflow. // How to calculate the space (padding-bottom): 9/16*100 = 56.25 // Another example: you have an image 400x250. // So if you want to calculate the space you do: 250/400*100 = 62.5 padding-bottom: 56.25%; height: 0; } .b-lazy { max-width: 100%; }
Iframes, unity games etc.
With blazy.js you can lazy load everything with a src attribute, not only images. For example iframes:
<iframe class="b-lazy" data-src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
With AngularJS
Some users have asked if they can use blazy.js together with angular.js. The short answer is yes. Blazy.js is just plain javascript why you of course can do that. However since angular strippes the data-
prefix from attribute names as part of the directive-name normalization process you either need to:
- change the default data-src name because otherwise it’s like setting two src’s and firefox and chrome handles that differently.
- or don’t have any default src.
// Example var bLazy = new Blazy({ src: 'data-blazy' // Default is data-src }); //Markup <img class="b-lazy" src="placeholder-image.jpg" data-blazy="image.jpg" alt="alt-text" />
or
<img class="b-lazy" data-src="image.jpg" alt="alt-text" />
License
bLazy is licensed under MIT and the DWIWYWBPVMS license. (Do With It What You Want But Please Visit My Sponsor).
Support
Support bLazy by visiting my sponsor:
Thank you for sharing with us this amazing post!
This is great information for a person like me who has a slow website.
Hey its a great tool. Thanks for the effort. It is working fine for images and YouTube all embedded videos.
thank you so much for sharing this post with us.
This is very good information for me because I use a lot of images in the content my site
. But I think Server speed is also important.
Is there any way in which I can improve my site
speed because I use a lot of images for my content?
how can I optimize my images for site speed?
Please, can you tell me that how can I optimize my images for improving my site speed? My Site speed score for the mobile version is poor. I am using a plugin but it is not helping.
This is a cool plugin so well done. Thank you for your valueable information that you give us. I’ve implemented the plugin in Bhojpuri Songs Download.
Hey its a great tool. Thanks for the effort. It is working fine for images and YouTube all embedded videos. Nice One
Does this work for AMP page images lazy load?
thank u
Great plugin. Thank You very much!! for the time and effort that you’ve put into this. its realy helpfull
a great tool. Thanks for the effort. It is working fine for images and YouTube all embedded videos.
.b-lazy {
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
max-width: 100%;
opacity: 0;
}
.b-lazy.b-loaded {
opacity: 1;
}
I was searching for this code, finally it will help me a lot. thanks for publishing this post. thank you
Hey its a great tool. Thanks for the effort. It is working fine for images and YouTube all embedded videos.
Great plugin. Thank You very much!! for the time and effort that you’ve put into this.
I’m trying to use b-lazy to load images in a portfolio (card-style setup, with image and text) and the script works fine (I have the gif using a container while it’s loading), and I had to set it to width and height equal to 200px to match the image that will come later. I have the gif, and then the image is replaced.
It happens that some of the images are not 200×200 so get deformed, so I’ve added a code to be executed similar to your example:
$(function() {
initializeLazyLoadOfImages();
})
function initializeLazyLoadOfImages() {
var bLazy = new Blazy();
var bLazy = new Blazy({
breakpoints: [{
width: 200 // Max-width
,
src: ‘data-src’
}],
success: function(element) {
setTimeout(function() {
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the “loading” class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/, ”);
element.removeAttr(‘width’).removeAttr(‘height’);
}, 200);
}
});
}
that removes the width and height attribute of the image once it has removed the loading class (that puts the loader.gif).
Unfortunately, it seems that it removes the width and height *before* even the gif is removed, so it becomes a narrow bar at the top, it causes reflow of the page and the text under the images reflows too.
Once the image is fully loaded, it puts the image in its place but the text is not reflown, so it might get ‘hidden’ in the container is used .
– If I leave the width and height it works fine but distorts smaller images
– If I remove it, the cards are resized to a narrow loader gif and when the image appears, the under text is hidden. Maximizing or changing window size, causees a reflow and cards render fine again.
Any idea?
Thanks in advance
Hello Sir,
It seems that your library doesn’t work anymore with the last bootstrap carousel, as well as their accordeon or datatables (everything that is hidden on load).
If possible, can you please update your code or provide here a solution for those who are struggling with theses issues
Best regards,
I had the same problem a bit earlier.
One thing that I think Bjoern Klinggaard forgets to emphasise in the documentation is the need for a placeholder image. Once you put this in there, then it will work.
For example instead of:
add a placeholder image, such as:
This then was working for me. Give it a shot.
Hey, it’s awesome. Images increase traffic retention time. and this lazyload image help to upload the good and presentable image to make the Post awesome
This is really great? Does it help in pages with AMP?
Hey its a great tool. Thanks for the effort. It is working fine for images and YouTube embedded videos.
Great tool. Thanks for the time and effort that you’ve put into this.
is this plugin are available on any platform?
Nice plugin!
How can i apply lazy load to link
Hi there,
I have started using Blazy and I need a little help:
can I make one global instance and then use it where I need it and add different options? can I at all use a global one in different classes?
Right now I have the problem that I use it once, when the panel loads and it works fine but not when I scroll down, I assume that this is because I have the code only at initialization and not in general. So I need to make it global.
Making it global would also prevent any errors if I always have to initialize a new Blazy class and they all exist parallel.
A very sincere THANK YOU!
This works beautifully and allows me to make a very simple photo page with close to a hundred pictures without running this risk of setting of the bandwidth control at my hosting service.
Thanks for the detailed write up. Better than other lazy load js I read about.
Is it possible to load images that are above, like echo “offsetTop”?
https://github.com/toddmotto/echo
It’s useful when using Angular/React/etc because when you go back to a page/component, you may not be at the top of the page (i.e. the window.scrollY is not 0) so you may have images above. If you only see a piece of those images, bLazy doesn’t load them until you scroll up and uncover more of those images.
Hi. Does “Multi-serve images” work with background images as well? I want to load responsibly sized background images, but I can’t get it to work with my breakpoints. Wondering if I’m trying something that doesn’t work by design.
I like this site because so much utile material on here :
D.
I found blazy a few months ago and think it’s great. I’ve been using it on several projects, but have had a couple of hang ups:
1) Every now and then the image doesn’t load and requires a hard refresh for it to work.
2) More importantly, when sharing a page through a text or on social media, a lot of times an image on the page is posted with the link. The problem I’m having is that when a page with a blazy loaded image is shared, it sends the placeholder image instead of the actual image. How do I get the intended image to show through a shared link rather than the placeholder?
You’ll probably need to define headers with opengraph to define the image to use instead of having the social network to ‘scan’ your page for the images instead
Hi,
when using with bootstrap carousel with 2 slides.
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
second slide doesnt show on navigation click.
i tried this
var bLazy = new Blazy({
container: ‘.carousel-inner’, // Default is window
breakpoints: [{
width: 420 // max-width
, src: ‘data-src-small’
}
, {
width: 768 // max-width
, src: ‘data-src-medium’
}],
success: function(ele){
// Image has loaded
// Do your business here
console.log(‘Data-src success’+ele.src);
}
,error: function(ele, msg){
if(msg === ‘missing’){
console.log(‘Data-src is missing’);
}
else if(msg === ‘invalid’){
console.log(‘Data-src is invalid’);
}
}
});
$(‘#myCarousel’).bind(‘slide.bs.carousel’, function (e) {
// console.log(‘slide event!’);
bLazy.revalidate();
});
but it works partially, only on the second time you click the navigation, when you go back to the first one.
is there any way to force a blazy image to load no matter what ?
load() didnt work for me.
Thanks
greate article!
How to use this plugin with jquery masonary ?
Having read this I believed it was rather enlightening.
I appreciate you spending some time and effort to put this short article together.
I once again find myself spending a lot of time both reading and leaving comments.
But so what, it was still worth it!
Does the script unload images when they leave the view-port and leave the default image in it’s place so that no reshuffle occurs?
Thanks,
Tom
I have just deployed your plugin, which is working great as all the others here alreay said. However, one curious thing is happening: when I use it also for background images, Google Pagespeed Insight drops the mobile result from 90 to 76, sometimes less, and the desktop result from 97 to 95 (my example page: htps://www.aliseo.com/en/index4.php). This is happening only when I use the plugin with background images. I made no changes to your js script. I am no programmer at all, so I may have failed to understand whether I should change some of the parameters.
I hope you can help me understand what’s happening, since I am very satisfied with your work.
Thanks
can I make this just automatically lazy load every element without adding the class/src etc?
if so, how?
Great plugin!
Can’t figure why this is not working:
Live sample: http://agrozoo.net/jsp/wood1.jsp
Loads all images at startup.
Hmm, it turns out, the same as at jquery lazy load plugin, step 3 of ‘how to use it’ is that each img tag must have fixed width & hight in style.
In the How to use bLazy (lazy load images) section step 1 is missing something because the script loads all images.
I tested with a plain vanilla html file to get to the bottom of it. What is needed is some CSS.
This:
img {width:100%}
img.b-loaded {width:auto}
I followed step 1 and 2 exactly along with 15 images in my vanilla html test file and then added copies of the CSS styles from the demo page common.css and style.css
By process of elimination I arrived at those 2 CSS statements above from style.css. Without them the script does not do a lazy load.
A plain vanilla html file is defines as:
I see many people in many forums who are have a problem making bLazy do a lazy load. I’m guessing the two CSS statements above give the img a real height and width to work with which seems to be a solution put forth by MC on 2017/11/27
At the moment of bLazy activation all images (transparent.png) are in visible area (due to their original sizes – 16×16). You can check it by removing script and check layout of the page with DevTool panel.
That’s why script “thinks” that all images have to be loaded just from beginning.
Just put attribute ‘ height=”704″ ‘ to the first image and check result.
And when you scroll down the content of the div.wrapper, not the one image appear in visible area but the number (again, due to the size of original images). So, you’ll see few log lines, not one.
Hey,
bLazy load not working in bootstrap tab slider image. how I can use blazy load in bootstrap tab slider images
Hello,DINBROR
i am trying to use wonderful b-lazy for my website.. my markup was like this …
how can i use this with html5 picture tag and source attribute.
My js code like this
if ($(“body”).hasClass(“page_id_images”)) {
//Global blazy module starts
var bLazy = new Blazy({
breakpoints: [{
width: 480, // max-width
src: ‘data-src-small’
},
{
width: 768, // max-width
src: ‘data-src-medium’
},
{
width: 1280, // max-width
src: ‘data-src-desktop’
},
{
width: 3840, // max-width
src: ‘data-src-large’
}],
error: function(ele, msg) {
var image = $(ele)[0];
if (msg === ‘missing’) {
console.warn(“Custom ERROR: “, image, ” data-src is missing\n”);
} else if (msg === ‘invalid’) {
console.warn(“Custom ERROR: “, image, ” data-src is invalid\n”);
}
}
});
}
//Global blazy module finishes
Thanks for all this great information 🙂
Hi, awesome script!
Question, is it possible to have different offsets for different images on the same page? Or have a timed delay, once 1 image loads then the next one loads a certain amount of time later?
Thanks!
I was wondering if you had any working example or codepens of the ability to multi-serve responsive images because I can’t quite get it working.
can i use this with ng-src or data-ng-src ?
Hello!
You wrote blazy works with all elements with src, but i think it doesn’t work with another scripts.
Is it true or maybe it’s possible to make it work?
I get an unknown error. Can you help me solve the problem?
I love it. I am now using Googles Lighthouse and they advised me to lazy load. This is how I found you. The website now loads really well. Thanks again. http://leejohnson.it
I follow 2 steps and is not working. What i am doing wrong?
Hi Dinbror,
Thanks for your plugin, it’s work so great. I use it to load image when scroll, and when container load success i apply slider on that image loaded, but container final not success trigger.
Hi there I am trying to use Blazy in my vanilla-slideshow and what i see it is that all images are loaded in the console.log before i click next…
this is the https://github.com/DimitriMikadze/vanilla-slideshow
the problem it is this all images blazy are loaded at the same time and i need the blazy to load only the first the next slides will be loaded after i click next…
I have added to the vanilla-slideshow the click event when click next and I go to the next image but the issue is that the images is loaded and visible…
if i use display:none; and I click next and change the image class to display:block the images is blank empty and the slider shows nothing… if I use visibility the same issue…
is there a way to say the lazy loader to load initially one image and the rest while clicking the next action or a blazy action?
I want to use this slideshow that is vanilla based one and with more than 100 images in full screen and i do not need all the images to be there only the first one and the rest on click…
here some part of the HTML
thanks for any tip!!
by the way the fucntion bLazy.revalidate is not working in my case
bLazy.revalidate = function() {
dothis();
};
function dothis(){
alert(”);
}
It is possible to add description how use it witt srcset?
All good but I am unable to load the demo. Is this problem with everyone user here?
Great tool. Starting to use it on a project with 100s of message cards / images. I’m using it with Masonry and the option to “Load More” / “Load All”.
I’ve seen you mention a way to set the image size for the placeholder so that reshuffling doesn’t occur as they scroll. Do you have an example for that? I know the image size (aspect ratio) ahead of time and can return it with each message card.
That worked perfectly. Thanks for a really helpful add-in.
Thanks
Howdy, i read your blog from time to time andd i own a
similar one and i was just wondering if you get a lot
off spam responses? If so how do yyou prevent it, any pluginn orr
anything you can recommend? I get so muchh lately it’s driving me insane
so any help is very much appreciated.
That worked like charm. Thank You!
Hello
Is it possible to lazyload base64 encoded images too?
Thank you for a great plugin!
Would it be possible to add a class once the image load is triggered (something like b-loading)?
Hello,
Is it healthy to run a blazy function everytime? Because I have to div that opens to reveal thumbnails, so I call blazy on that container when user clicks on a trigger so it doesn’t preload thumbnails (my div is visibility: hidden, not display: none, because I want my animations).
Hi Dinbror,
first: thank you for the amazing script and your work! 🙂
I would like to know if its possible to use your script on parallax images from this script: https://github.com/nk-o/jarallax
The markup is like:
<div class='jarallax' style='background-image: url()’>
Your content here…
Do you have a hint for me on this? Im not getting this to work.
Best regards
Jens
Is it possible to activate lazy-loading on clicked button? I would like to have mechanism like on site: https://tookapic.com/photos
After clicking button I would like to lazy load rest gallery during scrolling.
Yes just initialize blazy in your click event:
var bLazy = new Blazy();
Hello,
Thank you for your great tool !
I would like to create Offset. Not from a number of px before an element is visible (like your example) but after all other elements of page have been loaded. (or number of seconds after all other elements of page have been loaded).
Is it possible ?
Thank you.
Hello Dinbror,
I see many users like myself want to use bLazy on a click event not a scroll event.
Would you kindly make a summary in the “How To Use” section above?
My use scenario: A hybrid app which loads into a webkit browser. The browser attempts to load every image before showing the user anything. The result is 30 seconds before display of anything. Without unseen images it is 2 seconds.
As the user clicks and looks, the click could trigger loading.
I am ambitious designer, but not a programmer. If a click event is possible, I kindly request the following details to be clarified above. My attempt in outline:
1) Tag all “future load images” as data-img
(And provide a dummy img like blank pixel. Is that required actually?)
2) Load script
3) add _________ in document.ready
4) onClick event: _____________ + blazy.revalidate();
Thanks for helping the designers… 🙂
Grace
Greetings!
Your script is fantastic, it accomplishes what “lazyload” does only its only a fraction of the size of lazyload!
It seems to work 100% with IE and Firefox.
However in Chrome it fails. I inspected and looks like the suffix “b-loaded” is added to the image class. However this does not happen in Chrome, and the pics wont load. Any suggestions? Thank you!
Balint
Do you have a live example?
Does it add weight to total number of Javascripts served on your site?
after loading an iframe with bLazy the user needs to click back button in browser twice to go back to previous page – bug or feature?
I have a div with lazyload background, inside an anchor tag:
However, the background image is not set. When I move the div outsite the A tag, it works fine.
What am I doing wrong?
regards, Felix
the same issue, any solutions ?
I believe that this line has a relation with our issue :
if (!hasClass(ele, options.successClass) && (force || options.loadInvisible || (ele.offsetWidth > 0 && ele.offsetHeight > 0)))
I solved the problem by adding a padding: 50% to my images
Hi,
I’m trying to create a page where a database is searched for products, and for every product (=row) there will be a button that will open up a modal box with images of the product. It’s a HTML/CSS modal with no Javascript used. Currently the page pre-loads all the images for all the rows that a search returns, so that could be hundreds or thousands of images pre-loaded.
A small excerpt from the code:
var bLazy = new Blazy({});
I’d like it so that the images for any row are loaded only after the user opens that row’s modal, but I can’t seem to get it to work, the page loads every image no matter what I do. What could I be doing wrong?
Hrm, the code bits got eaten away, let’s try again:
var bLazy = new Blazy({});
Hi,
should i use your plugin to show the item list for our ecommerce website?
Please let me know.
Thanks
Arvind
Hi,
I am having an issue with ajax loading next products page. I am using revalidate but images don’t seem to load. Could you please have a look?
http://dev.olizz.com/necklaces
Username : Admin
Password : yec1Uukcuy5]fqvqyY
Thanks a lot,
Nikos
Having the exact same issue
Hey, is it possible to add retina-support to your example 1.5 (Lazy load image example with picture element)?
Hi! You should use `sizes` attribute and `w`descriptor.
HI, I just found your lazy loading script: it works great!
Just a question, though: how do I add it to background images?
I don’t get how it works… I have
…
Can you help, please?
Thanks,
Paolo
Damn, it seems the code didn’t go through.
class=”article-card card-small” style=”background-image: url(‘foundation/images/card-bg-2.jpg’);
Hi Paolo.
Have you looked at my background example: http://dinbror.dk/blog/blazy/#Background ?
Yes, of course. but not
class=”article-card card-large b-lazy” data-src=”background-image: url(‘foundation/images/card-bg-1.jpg’);”
or
class=”article-card card-large b-lazy b-loaded” data-src=”background-image: url(‘foundation/images/card-bg-1.jpg’);”
work at all.
I am so dumb!!!
class=”article-card card-large b-lazy” data-src=”foundation/images/card-bg-1.jpg” src=””
works perfectly!
Thanks a lot!
Sorry to have wasted your time! Great code! 🙂
Works great and fast… HOWEVER
Very sporadically (once in 50 times) in Google Chrome (53.0.2785.143) it doesn’t load. I don’t know if this is a Chrome bug or a B-lazy bug. All other javascripts also don’t work, the page is not usable and the visitors leave…
Anyone else experiencing the same? Is there a solution?
Do you have a link so I can test and see?
http://new-country-songs.com/
y=1<window.devicePixelRatio;e={};
This line seems to be the error. You have any idea for a solution? 🙂
Can’t replicate it. Anything specific you’re doing besides reloading the page?
The line you refer to is just a check if the device pixel ratio is bigger than 1:
_isRetina = window.devicePixelRatio > 1;
Is there a way to force all images to load immediately?
Sometimes UC Browser just doesn’t blazy-load the images.
So I want to force load all images when useAgent is UC Browser
http://gs.statcounter.com/#mobile+tablet+console-browser-ww-monthly-201509-201609
good to know: blazy images don’t load until you add the alt-tag. maybe this will be fixed in an upcoming version?
Hey Tim.
Thats not true. It loads fine without alt tags
I have noticed as well that without an alt tag set, also with alt=””, the image won’t load. v1.8.2
Hi there, thaks for tools, I try to integrate to wordpress
Hello mate, first that all excellent work congratulations.
I’m using a CMS to add the images and is hard for the clients add html tags into the code, that is why I’m trying to do it “automatically” so I make this JS to convert a normal into a blazy format.
$(document).ready(function(){
$(“#content img”).each(function () {
var img = $(this);
img.attr(“data-src”,img.attr(“src”));
img.attr(“src”, ‘web/system/images/pattern.png’);
img.addClass(“b-lazy loading”);
});
});
////////then, I’m running the blazy code:
;(function() {
var bLazy = new Blazy({
selector: ‘img’,
container: “#content”,
success: function(){
$(“#content img”).each(function () {
(this).removeClass(“loading”);
});
}
});
})();
///// But is not working, what I’m doing Wrong?
thanks mate.
Doing it this way images wil be requested before jQuery has converted them to blazy format…
Hi, I am searching for a way to print a page with a large number of images. I could change the html if I am printing the page and remove the lazy loading. Do you have another idea? I searched for a function where I can invoke all images even if they are outside of the viewport, but I could not find one.
Maybe you have another idea
Hi,
First thanks for the great plugin, i am trying to add Blazy on sku list pages for a e-commerce web site, where there is some sort of pagination and all. After implementing i observed that it is working fine on everywhere apart from iPad, why images are not getting loaded on iPad. Tried executing the code on scroll event as well but no luck. Can you please help me to understand why its not working. I am using following code snippet
window.bLazy = new Blazy({
container: ‘.prodList’,
loadInvisible: true,
success: function (element) {
log(“Element loaded: “, element.nodeName);
}
, error: function (ele, msg) {
if (msg === ‘missing’) {
log(“Data-src is missing”);
}
else if (msg === ‘invalid’) {
log(“Data-src is invalid”);
}
}
});
thanking in advance 🙂
Hi there,
thank you very much for this really cool script!
It works like a charm when used all by itself.
I saw that you also have some additional information if used in combination with angular, but I got a problem when using it with angular and ionic2:
It does not load the images after first initialization, and even when using a button to call the revalidate method, it only loads the images inside the viewport, all other images are ignored.
Please check this plunkr for an example: https://plnkr.co/edit/5LoBQ389PQv4AlBTlbjw?p=preview
Thanks again and in advance if you might be able to offer a solution/workaround.
Best,
Olli
Did you try add a container to the options that is the containing div wrapper for the ng-repeat in HTML?
Example:
var bLazy = new Blazy({
src: ‘data-blazy’, // Default is data-src
container: ‘#list’
});
Hi Dinbror,
Thanks you very much for your script
it’s great and very easy
have a nice day
Cyril
Hi,
This looks really useful. Have you tried the plugin with imazen slimmage? We really need the dynamic imageresizing capabillities of slimmage, but lazy load on top of that would be fantastic!
Thanks
Rune
Hi Rune.
Blazy support srcset and the picture element which is supported in all major browsers today. Otherwise there are polyfills for legacy browsers.
Wouldn’t that solve your issue?
Hygge
Bjørn
Why data-src attr remove after b-Lazy Initialize?
Hey Roman.
It’s removed after image load to present the makeup as clean as possible. Do you need it after load?
Hey,
First think first, thank you so much for this amazing plugin.
I use it on my website : http://www.jmbelloteau.com and the main functions work as expected so I’m happy.
I just have to little problem and I can’t figure out the solution :
– the load invisible function is not working
– the css class for transition (b-lazy loaded) work only on desktop, not on mobile. (pictures just pop up without fading)
Do you have an idea to resolve this two problems?
Thank you so much.
Cheers
Hey Jean.
Problem one: Can you elaborate?
Problem two: What mobile devices do you test on? Is my css animation working on my example site? http://dinbror.dk/blazy/examples/
Hello Dinbror,
Problem one: I activated the invisible function of your plugin but on the photo page of my website, the pictures don’t load if outside the viewport once the visible pictures are loaded.
Problem two: If you go to my website, you will see that the css animation are working on the home page.
But It’s didn’t work in the photo page. Maybe because the have 3 parents div?
Thank you so much for your help
Hi Dinbroh,
I commented above but thought I’d start a new post.
Awesome plugin and really easy to use however I’ve fallen in to the same trap a few others on this page have had with carousels. I’m using slick combined with blazy and it’s working perfectly until you drag or click to the thrid slide. https://jsfiddle.net/a4emf9qu/ If you scroll up or down or resize the browser it shows again but not onload.
Do you know how I can solve it?
Cheers and thanks again
Hey frazer.
You could do something like this: https://jsfiddle.net/a4emf9qu/4/
Thanks for this useful script/plugin, it works great.
I noticed that the html doesn’t validate unless you encase the data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== in quotes –
ie “data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”.
Is it possible to use data-srcset for background-img?
Hi, has anyone solved this issue? I’m triyng loading responsive bg images, on data-src-small+breakpoint method (obsolete, I know) and with a data-srcset, but nothing’s happening: it keep loading the “basic” data-src image.
Can Dinbror -or anyone else- hepl me?
tnx
Do you have a live example?
http://sitiinternet.me/test/
do you need somethin else?
Tnx for the support!
You can use breakpoints instead.
Examples here http://dinbror.dk/blazy/
I make some changes to fix problem with incorrect window width calculating:
– open blazy.js(not minified)
– go to line 109
– and replace each function under obsolete comment with
var x = (window.screen.width>document.body.offsetWidth) ? window.screen.width : document.body.offsetWidth;
each(scope.options.breakpoints, function(object) {
if (object.width >= x) {
_source = object.src;
return false;
}
});
nothing to do? can anyone help me?
http://sitiinternet.me/test/
Great piece of work, absolutely no issue, just set and go and it works. Thank you.
Hi, does your script support pixel density descriptors like 2x, 3x, 4x? And if not do you have any plans to implement it. Great script by the way.
Regards
Hi Dinbror
Thanks for making this. The SEO considerations are vital and it’s real easy to setup.
I have a gallery with lazy loaded images working (great!).
I’m now looking at hiding my gallery until someone clicks a “view gallery” DIV. It’s pretty simple CSS and jQuery which works fine too.
I notice the gallery DIV and content will load but the actual images fail to load.
If I remove the hidden gallery and load the page “normally”, everything works as it’s supposed to and the blazy images load fine.
My actual lazy script is very simple as follows:
var bLazy = new Blazy();
offset: 100;
Is this something you’ve enountered before which I need to cater for?
Many thanks
P
Blazy wont load or add hidden images to the load list.
You can call the public function revalidate() after the view gallery button is pressed and it should work
Thanks but I’m a little confused.
Do I simply update the following
var bLazy = new Blazy();
offset: 100;
to this
var bLazy = new Blazy();
offset: 100;
bLazy.revalidate();
or do I need to somehow bind that second script to my link of
Call bLazy.revalidate(); in your “view gallery” click event
Cheers – thanks for the help.
I don’t know what is wrong. I have created this gallery page using blazy load which works perfectly when I connect to internet with Alliance broadband, but only 2-3 images are loaded when I connect with Vodafone 3G.
http://onedayintime.net/gallery_blazy.php
It should not be a Vodafone network issue as it opens other pages quite good. It should not be a code issue as it opens perfectly with Alliance broadband. What else then!
ummm.. okay there was a syntax error and somehow Alliance broadband was supplying cached images. I have corrected that and is working like charm. Thank you for the wonderful script.
How do I get this working with Masonry? It works, but it messes with the layout of Masonry. Is there anything I need to do to make the images that load with b-lazy follow the Masonry layout?
Do you have a live example, jsfiddle or similar?
Its possible. I have been using them together
Am I able to email something to you?
Did you ever figure out how to get bLazy to work with Masonry?
Blazy does not work in multiple if not most cases if image is in viewport on load.
Do you have a live example? You might be doing something wrong 😉
HI Dinbror,
Its not working with carousel any suggestions.
You might have to call the public load or revalidate function. Do you have a live example? What carousel are you using?
Great plugin but I can’t seem to get it to work properly with getmdl.io.
The “visible” images loads… but when I scroll, the rest of the images of the page don’t load. They do load if I resize the window (change viewport).
I’m using the very basic implementation, b-lazy class, script at the bottom, etc.
Anybody encountered the same issue?
Hi,
Great script!
I’m currently using the following in my WordPress theme to output a post’s thumbnail:
‘b-lazy img-responsive’ ) ); ?>
And it outputs it as:
I can’t seem to work out how to make it use data-src instead so it works. Any ideas?
Thank you!
Well that failed because of the code. Check out here:
http://i.imgur.com/UrIETSm.png
Thank you!
Cool Plugin,
responsive is not optimal. When i resize the page, i have the same image. only at reload i become the right image. Thats not good. Can you add this?
Hey Marcel.
You can read about the reason here: https://github.com/dinbror/blazy/issues/77
When working with an templating engine (in my case pureJS) wrap the blazy JS init in a window.load instead of a document.ready function to get it working
Thanks for this helpful plugin. I just about have it working as intended. The only issue is that my loading gif image isn’t showing. I have it specified as the src and I have checked the path. When I inspect the image, it shows the loading image as present in the code, but it never shows on the page. I tested on slow connections… nothing.
Any thoughts?
Hey Derek.
Du you have a live example? Otherwise you can add it as a background image like I do on my demo page: http://dinbror.dk/blazy/
This plugin is very cool ..
do i need to use for seo purpose?
Hi,
I was just thinking of using bLazy in my project but I can’t find the way to use srcset with it. Does this script support srcset?
Thanks
Blazy is awesome I’m using it in my site, I just have a question:
I have a slideshow that works horizontally. Only the first four images in the slideshow are visible, showing the next images works by pushing a button.
when I go to the slideshow, the first four images loaded well, but after pushing the next button, the next images are not loaded untill I scroll upwards or downwards.
how this is solved??
Thanks!
Hey seily.
You either need to call revalidate or load the next bunch of images in the slider with the public load method.
Let me know if you need more help.
Hi Dinbror,
Love the plugin but I’m having problems loading images in a carousel also. I’m using slick but only the first two images are showing then the rest are hidden.
I’m using this to initialize blazy –
;(function() {
// Initialize
var bLazy = new Blazy();
bLazy.revalidate();
})();
Do I have to use bLazy.revalidate(); when I call slick?
Cheers,
Joiner
Thank you Dinbror for sharing this useful script. It works like a charm and is really fast!
I have a question regarding success triggering. Is it possible to create an event which triggers when all images in the viewport are loaded? Like the success function, but for all images that you see in the browser?
I want to create a loading animation with a fix position on the bottom which always appears when blazy is loading elements. Is there a way to create it?
Thank you in advance for your help
Christoph
Is it possible to ‘watch’ multiple containers? I have two scrolling image lists within containers and would like to lazy-load both of them. I thought I would initialize another variable, with a different container, but I see above that would create identical event listeners. Is there any way?
Hey Bill.
You can either use the same class for both containers or pass a comma separated string to the container option
That worked perfectly. Thanks for a really helpful add-in.
Incredibly simple, elegant, and powerful plugin.
My hats off to your wonderful documentation also.
Hello,
i would like to use the b-laze in a slideshow in order to lazyload images in “li” tag (more than 50).
But in order to turn the invisible images into visible with scrolling i would like to make them visible with next/previous buttons of the slideshow.
To be more accurate i would like to:
First and second images loads when site load, third image loads when user hit next button (from first image), forth images loads when user clicks next to go in the third…etc.
I would like to work like this because the loading time of the site is really huge.
Is it possible?
Did you ever figure this out? I’m currently trying to do the same thing.
@SPIROS and @KETAN
You can use the public load function to load next images when clicking the prev and next buttons
Hello!, thank You for this script.
How can I make it work in a wordpress blog?
Hi,
Good job !
Just an error in this sample : <div class="b-lazy" data-src="background-image.jpg"
The first tag in not closed 🙂
Thanks, updated 🙂
Great work – just starred it. What is the colour scheme you’re using for the code blocks in your posts?
Thanks Francis.
I’m using a custom one:
.code-undefined{color:#617A61}
.code-string{color:#FA8072}
.code-function{color:#FFA54F}
.code-int{color:#2B91AF}
.code-comment{color:#7CCD60}
Holy shills this plugin is amazing, it’s wonderful, works fast and loads so beautifully. I’m using it with background images and I’m in awe. Thanks for taking the time to do such an amazing work.
Firstly: thanks for this great plugin. it’s small, no dependency and easy to use. Just what you expect from a javascript plugin.
And now. I’ve also had the issue where “visible images” were not always loading on page load. And not even after starting scrolling up and down.
All I did was to wrap the blazy function into:
window.onload = function() {
;(function() {
// Initialize
var bLazy = new Blazy();
})();
};
And that solved the issue on my side.
I’m not a js guru, but using $(window).load(function() or other jQuery way to load such as $(document).ready(function() might not be the correct approach since blazy is not a jquery plugin. You may as well leave it alone from jQuery.
I’m not saying it won’t work, but it’s always better to use a script as it was intended.
I hope it helps.
Thenks DINBROR and Bob.
The code worked only in a fully open browser. With Bob’s hints, everything worked. But there was another problem. If you change the width of the browser, the code does not work any further. I do not understand the code at all, but by analogy it helped to add this code:
$ (window) .resize (function () {
; (function () {
// Initialize
var bLazy = new Blazy ({
offset: 1000 // Loads images 100px before they are visible
});
}) ();
});
HI,
it’s great working!
Very useful, Thanks!
Is there a way to wrap this into a angular directive?can you give example on how to implement this inside a directive?
Blazy isn’t originally made for angular why we must init it on scope instead of directive. It would be bad performance to init a new instance of blazy on every image.
I made a quick plunker example: http://plnkr.co/edit/aHOr2Fzp2JW4X9mwUso4?p=preview – I will review it again when I have more time.
I want to use it in angular, It’s working fine when I load static image, but when I try with dynamic image url like data-src=”{{mydata.image}}” or ng-src=”{{mydata.image}}” it’s says invalid so can you tell me how can I fix it?
Hey Jigs.
First try this: http://dinbror.dk/blog/blazy/#angular, and you need to wait initializing blazy until mydata is ready
Dear Bjørn,
thank you so much for the amazing plugin, there is some quality code in there, and also for taking time to give feedback to all this people.
I’m using blazy to serve responsive images, my breakpoints are 375px and 480px.
On iOS devices, when I change orientation portrait-landscape I go from one breakpoint to another and ideally I should load 2 different images, but since the plugin uses device width the loaded image is always the same, no matter the orientation.
Is there a quick way to override this and use window width to load the images?
Thank you for your time.
Pavel
You will need to remove the part that normalize the markup (line 176) and then implement the changing breakpoint logic. I would do it with window.matchmedia depending on the browsersupport.
Let me know if you need more help
Hi!
I really like this plugin, but I’ve noticed that breakpoints doesn’t working.
I’ve try this with IMG and DIV and it’s doesn’t work at all.
Even Your demo isn’t working properly :/
Hey Igor.
Can you elaborate? What it not working?
The breakpoints are defined by the device width not the browser width. It means that it’ll look at your screen width which won’t change when you resize your browser window.
The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the start width of your browser window is something small I don’t want to upscale a low res image if you resize it up.
Hi,
I’ve got an art gallery website and it works perfectly, its an combination with Angular and Masonry. Except for one detail.
I’ve got multiple filters that removes the current array in the masonry, it then loads in a new array and the masonry effect is reloaded.
After that, all my images from the array are loaded, but invisible. The public bLazy function that I call upon, with or without a timeOut aren’t working.
Any ideas?
Hey Koen.
Do you have a live example? What are you doing?
Do you call the public revalidate or load function (http://dinbror.dk/blog/blazy/#Functions)?
Does your plugin work with masonry?
Yes, but you might need to call the public “load” function depending on how you are using masonry.
They are using it on LEGO starwars: http://www.us.lego.com/en-us/starwars/gallery/
FINALLY a respectable and very good lazy loader script. I’ve tried several out there and all are terrible. Yours is the only one of quality workmanship. Had to post to show my appreciation. And bravo for explaining all the options and giving examples.
Is tahere any function like in ajax beforeSending?
I would like to make a loding screen why the images is loading.
Thank you for this code. This is excellent. Being able to lazy load css background images and multi-serve images for small screens is super useful.
Couple issues I noticed:
1) Multi-serving image seems to only look for the actual device width and doesn’t look for device orientation, so I can’t serve different images depending on if iPad is in portrait or landscape view. I suppose I should stick to images of same proportion to avoid the issue, but sometime I do want to serve totally different images when a layout changes completely.
2) On Chrome I noticed that if I scroll down to where an image is lazy loaded, and then reload the page, sometimes the image doesn’t load. Not sure why that is, because it’s not doing that for your demo page…
Looking forward to your updates!
When I am using b-lazy with imagesLoaded js plugin along with masonry, it doesn’t load images and only load images when I scroll the window.
$container.imagesLoaded(function(){
$(‘.gallery-wrap’).masonry({
columnWidth: “.grid-sizer”,
itemSelector: ‘.gallery-wrap .item’
});
});
b-lazy after this code doesn’t print on page refresh, but you need to scroll to print them. Above this code everything works fine.
Hi,
When I scrolled down below my page and refresh the page, it will reloads the image to the position that I had scrolled down earlier,
I want to press the refresh, it will not reload the image that returns the first position, the handle configuration or how,
Thanks for any help,
Hello Bjørn,
Your script works fine, but I have one question.
I’m using an image slider where all the images are positioned horizontally next to each other. Only the first image in the slider is visible Showing the next image works by pushing a button (javascript event).
If I scroll to the slider, the first image is loaded perfectly, but after pushing the next button, the next image is not loaded untill I scroll upwards or downwards a little (guess that triggers it).
any idea how to solve this?
Thanks!
Serge
Hi Dinbror,
Been using your blazy script for a while – but just venturing into using the multi-serve feature.
I’ve put together a couple of tests on JSFiddle for my own sanity as I’ve not been getting the results I expect on an iPhone.
This is my initial setup:
https://jsfiddle.net/floqdesign/6fynzsjx/
With multiple breakpoints and the current version of blazy being loaded.
The issues
When testing this fiddle on my iPhone I wasn’t getting served the medium image when the phone was landscape as I expected with a 480px breakpoint being defined.
I was getting the small image for both orientations.
I looked at your script and did some tests in the console and found that the query you use `window.screen.width` only ever gives the width of the iPhone – regardless of orientation.
My second setup example:
https://jsfiddle.net/floqdesign/tyn1s8gm/
This is a cut-down version with only 2 breakpoints defined.
I’ve included the blazy.js inline as I’ve modified line 69/70 from `window.screen.width` to `screen.outerWidth` which does differ on the iPhone when in landscape or portrait mode.
Perhaps I’m missing something about using `screen.outerWidth`?
I found this article:
http://www.quirksmode.org/blog/archives/2012/03/windowouterwidt.html
.. but it’s 3 years out of date.
My tests in the latest versions of Chrome, Firefox, Safari and IE all work.
Taking IE back to v8 doesn’t work but there is a solution:
http://stackoverflow.com/questions/5954725/the-script-does-not-work-in-ie-how-can-i-fix-it
When I say my tests all ‘work’, OK they don’t all return the same value – some browsers were taking some of their chrome or scrollbars into consideration – but they’re still returning a usable true screen width value.
Not able to test on other mobile devices to test.
Your thoughts?
Hey there,
This is a great script to use in place of Foundations Interchange function, which does not allow for lazy loading.
However, I am having the similar issue where sometimes, not images in view load at all. I can’t get this to consistently happen, but I’ve seen it in both Safari and Chrome.
This is the page where the in-view images aren’t always loading: http://www.dearcastandcrew.com
Thanks for any help (and a great script)!
Hello
Great Plugin!
would like to know possible using multi data-src and serve between jpeg and webp images if browser support webp.
data-src=”myimage.jpg” data-webp=”myimage.webp”
Thank you ,its wonderful
Hi,
I used the script like in your demo but something strange is happening for me – The images are already loaded when the page opens.
My markup is like this
<a href="”><img src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="” class=”b-lazy img-responsive” alt=”slider-thumb” />
and js
jQuery(document).ready(function ($) {
“use strict”;
var bLazy = new Blazy({
breakpoints: [{
width: 320 // Max-width
, src: ‘data-src-small’
}]
, success: function(element){
setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the “loading” class which holds the loader image
var parent = element.parentNode;
console.log(‘loaded already’);
parent.className = parent.className.replace(/\bloading\b/,”);
}, 200);
}
});
Any ideeas ?
Thanks
Script does not work on images that are in view when page is loaded.
Hé Bjørn,
Thanks for the great script. I seem to have a problem with lazy loading images that are part of an google images like script.
It’s an overview of images and when I click on one of them, a div receives ‘display: block;’ and it toggles open. Part of the toggled open div is a bigger image that I would like to have lazy loaded also… but instead it doesn’t do anything.
I tried to give both images the class ” but that didn’t work. I tried giving them seperate classes and added ‘selector: ‘.b-lazy,.b-lazybig” to the call. But that didn’t work either.
I’m afraid it has something to do with the toggled div…
any ideas?
Thanks!
Keston
The issue others have mentioned where images that begin in the viewport (or within the offset) do not load is happening to me. Works ok in OS X Chrome, but in Safari those images never load, making this script unusable. It’s unfortunate, I had my whole site set-up to use this and it was working well, but the Safari issue is forcing me to switch to something else.
Also, I really think the script should look at the viewport width instead of the screen width. I have instances where my responsive images change proportion based on viewport width, and if someone loads a smaller window on a larger screen, it creates some real issues.
I love bLazy, great idea.
Any plans to accommodate 3x images for iPhone 6 Plus and others?
http://mydevice.io/devices/
Thanks
Is there a lazy loading script for videos? I can’t seem to find one.
man…i did everything you said and it don’t work i don’t know why
Hi great plugin but I’ve got a problem. In some pages (apparently random) blazy doesn’t trigger and images don’t load. No error messages.. Any idea?
Hey Manuel.
Do you have a live link where you’re seeing the issue?
Hello,
Nice work!
It would be great if bLazy could work without negative SEO impact on images by keeping the original img src and therefore making search engine crawling possible.
For more information see
http://qnimate.com/lazy-loading-images-and-its-seo-impact/
https://github.com/qnimate/Qazy
Thanks in advance!
Hi,
Great plugin. Is there a feature to unload images as well once they are no longer in the viewport?
Cheers
J
Was any headway ever made on this?
Hey Bjørn
Awesome script! Keep up the great work…
Just want to tell you there’s an even shorter version of the base64 decoded GIF.
You use:
R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
Smaller (26 bytes):
R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
Using it for some time without problems.
Source (in the comments):
Got a question/request. Would it be possible to lazyload several files in one go, for the background of an element, which can have multiple backgrounds. Just like:
data-src="image.jpg|retina-image.jpg"
but where you can force a load of all the files with a switch or using another symbol instead of the pipe.
Regards
From DK 🙂
Hey, cool plugin!
Does it destroy images that are scrolled out of the viewport? Is it possible to destroy images loaded via background-image?
Jeremy, did you ever get any resolution on this question? Memory would go bonkers if you are lazy loading videos and then don’t destroy them when the leave the view port. Thanks.
Hej Bjørn,
Supert lige tool, fik mig lidt ud af performance problemer omkring 1 års billeder på 1 webside 🙂
Is it possible to use the Blazy also like an “inview” plugin, so that it could add a class to some specified div? I have css multiple backgrounds and I cannot find a way to lazy load some parts of them without enlarging html trees.
Hello
I use javascript for my application and my question is.
if the callback get success, can i save the image on my system?
where i find this image the blazy is loading ?
thanks for your help
I’m encountering the exact same problem: http://stackoverflow.com/questions/11419537/lazy-load-wont-load-visible-images
Lazyload does have a workaround but I can’t find a solution for Blazy
Hi Bjørn,
I’m experiencing an issue with IOS (iPhone iPad)
My first image doesn’t appear until I scroll…
I’d like to get it loaded on $(document).ready
I guess I can achieve this by using the .load function but nothing seems to work on IOS
Hi,
what has changed in the new version? Is there a changelog somewhere?
Thanks,
Risto
http://www.hundiurg.eu
https://github.com/dinbror/blazy#changelog
Hello
Is there a way to set the retina image source in the code where blazy is initiated?
We would like to keep the img tag not so clustered.
My suggestion would be to add an attribute in the breakpoint definitions “src-retina”, where we can set a data source.
// Example
var bLazy = new Blazy({
breakpoints: [{
width: 420 // max-width
, src: 'data-src-small'
, src-retina: 'data-src-medium'
}
, {
width: 768 // max-width
, src: 'data-src-medium'
, src-retina: 'data-src-large'
}]
});
What do you think?
Cheers,
Aldo
Why not go with a retina-first approach and always downscale.
In this way you don’t need multiple images per breakpoint and all new devices has retina screens 😉
This means I would still have to go with this:
data-src="image.jpg|retina-image.jpg"
Or how would the code look like?
Here 🙂 http://pastebin.com/2yTvebPF
Hey Seppo.
That’s how it should work. How should it know that you’re adding an already loaded image with ajax? But the good thing is that the image is cached and will load/show instantly.
Cheers
Bjørn
My example code was stripped away, but it was just {span class=”b_lazy” data-src=”/images/image1.jpg”}{/span}
In the new patch of posts there isn’t “b-loaded” class by default, even if it’s the same avatar that was already loaded in previous patch. If first Ajax response is like
and second response is the same
then in the second response it will handle data-src, because there isn’t loaded class yet. It may be that this is uncorrectable problem and we just have to live with this.
There’s a little problem when loading more content via Ajax. Didn’t confirm this yet, but I think that after calling revalidate() -function b-lazy forgets previously loaded images and will request same images again. This is a problem when there’s same avatar -images in the new patch of posts, for example.
Hey Seppo.
If you confirm, please post a live example. Works fine here. The code won’t load an image if it already has the loadedclass
Thanks. Cool tool. I’ve defined a breakpoint, but I’ve only provided a “data-src-small” for my extra large, non-essential background image. My other images only have a “data-src” defined. When I view with small viewpoints, it seems like the other images are displayed as normal. This is behaviour I wanted. I just want to check it was also the behaviour you expected.
Yes 😀
Hey there – great plugin!
Is it possible to load the image dimensions before the actual images? When I scroll through a load of images they jump around a bit as the actual image dimensions are loaded.
Thanks!
Hey Mingis.
You need to reserve the space for the images to prevent page reflow. See my responsive example for reference.
Hi Bjorn,
Impressed with your nice work, thanks 🙂
I just found a strange bug with it:
I have a large enough list of images and they are out of initial page view.
On page scrolling down everythin’s OK, images are loaded.
BUT if to reload page being among those images – they don’t load at all. Scrolling down or up loads invisible images, but those initially in view – remain unloaded.
btw this bug could be reproduced on FF only (chrome does it OK).
FF v.29 I have.
Regards
Iho
Hey Iho.
Do you have a live example I can see and test? Are you seeing same issue on my demo page: http://dinbror.dk/blazy ?
Cheers
Bjørn
Hey Iho – I’ve had similar problems in Chrome with a site I’m developing now. I can’t replicate on the bLazy demo page, however.
My temporary (horrible) workaround is to trigger a revalidate after 500ms, which seems to do the trick. Simply triggering the revalidate without the setTimeout doesn’t cut it unfortunately.
setTimeout(function(){
bLazy.revalidate();
}, 500);
Same issue here, did you find a solution? For me in Chrome only sometimes blazy doesn’t trigger, in particular on page reload. Any idea?
Hi there,
had the same issue with chrome and safari. Running blazy on
$(window).load
instead of
$(document).ready
solved the problem here.
Cheers,
tom
Hey guys.
Do you have live examples? It smells like repainting issues. You need to reserve the space the images uses like I do on my demo page.
Hello 🙂
your code works great, however, with the jquery mobile filterable widget input, the ‘data-src’ image do not display because you might have call for an image which have not been ‘blazy’ parsed yet, I guess there is some work on this particular point since we have to consider that this plugin exists for huge list of images.. and because the filterable widget when using jquerymobile is ‘quasi’ mandatory.
Anyway
Keep on the good job !
Hey Piem.
Have you tried to use one of the public functions, revalidate() or load(element)?
Thanks for the awesome plugin!
I’m using Parallax-ImageScroll on a prelaunch local site, and I think that the blazy monitoring of scroll position is causing the parallax to lag on aggressive scrolling… Is there a way to destroy blazy when all images have loaded successfully?
tx again! Tim
Hey Tim.
It auto destroys when all images have loaded 😉
Very good and helpful plugin!! I really appreciate your sharing with us!
Thanks for this great script!
Can you help me with follow questions
1) I use the script on a page that has collapsible tabs (display none->block) – what is the best way to re-run bLazy.js again to load newly visible images?
2) What is the best way to handle errors? Replace 1×1.gif with default image via javascript (can bLazy.js do this and how?) or assign a default background image to “b-error” class?
Thanks and have a nice day!
Hey Robert.
1) It depends on the use case. There are two ways. Either call revalidate which validates the document again or trigger the newly added item(s) with the .load() method:
var bLazy = new Blazy();
bLazy.functionName(); //bLazy.revalidate(); or bLazy.load(element);
2) I normally hide the image or show a default error image. If it’s an image you can do it in the error callback (http://dinbror.dk/blog/blazy/#Callback) like this:
var bLazy = new Blazy({
error: function(ele, msg){
ele.src = 'error-image.jpg'
}
});
Or if it’s a background image add the image in css to the “b-error” class as you write.
I’m currently toying with the idea of combining Nested.js with element background images loaded with bLazy – but currently the bLazy makes the elements disappear after loading.
I traced the problem to the line 147, where the background image is inserted with setAttribute(‘style’). Nested.js also plays with style attributes but those changes get overwritten when the background image is set.
If bLazy changed only the background image this problem could be avoided – for example something like:
ele.nodeName.toLowerCase() === 'img' ? ele.src = src : ele.style.backgroundImage = 'url("' + src + '")';
Hey Saku.
Thanks for your feedback. I’ll update the script soonish 🙂
You’re right, I only need to change the bg img.
Thanks
Bjørn
Updated. Thanks again
https://github.com/dinbror/blazy#v-121-20140323
Great plug! Only one issue: It does not detect divides that are wrapped in a li tag. Any ideas? Thanx.
Hey Jason.
That sounds odd. Do you have a live example or codepen/jsbin/jsfiddle I can see?
Cheers
Bjørn
Hi again. To move on, I rewrote the HTML mark-up for this particular use to use an . In doing so, I discovered another issue where the images will not load if the view-port is smaller that 1298px. I posted a question over on StackOverflow. You can get the link to inspect the site over there. Thanx for your help.
Hey Andaero.
I’m back again. Was out traveling. You have closed your site again 🙂
Just made a quick codepen where I lazy load images and background images in an unordered list: http://codepen.io/dinbror/pen/Kaoxr
This works great! I was able to test it with the multi serving images using Chrome emulator. Just wondering if I can make it work with image container width rather than the screen size width? The reason is that on the page, the column used for displaying the images might not occupy the max screen size width.
Thanks very much in advance.
What is about SEO and google image bot?
The Placeholder in src attribute can be a problem for SEO.
http://www.seroundtable.com/google-manual-action-image-mismatch-17631.html
https://support.google.com/webmasters/answer/3394137
Hi Markus.
That’s a really good question but unfortunately a grey zone.
I have not received the “Image Mismatch” message for any of the sites I use bLazy on.
The google bot also understands/executes basic JavaScript but if it’s important that your images are indexed in google images I wouldn’t lazy load them.
Works fantastic. I have a page with lots of images so this makes loading really quick!
Blazy -> Blazying fast!
Great work! Thanks a ton for making life for me so much easier!
Thanks Magnus. Glad you like it 🙂
Hygge
Hello
Great Plugin!
I try to multi-serve responsive images with breakpoints. Did it all like in you example.
Unfortunately it always loads the image defined in data-src and not the corresponding ones defined for each breakpoint.
Any idea?
Thanks,
Aldo
Hey Aldo.
How do you test it?
The breakpoints are defined by the device width not the width. It means that it’ll look at your screen width which don’t change when you resize your browser window. You can emulate device widths in chrome: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#enable-emulation-panel.
The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the start width of your browser window is something small I don’t want to upscale a low res image if you resize it up.
Hope it make sense 🙂
Bjørn
Well thought! Thank you! 😀
Is there anyway to override this behaviour ?
For example i am in mobile portrait view.. Now width is less than 492 and is use a image. And if the user turns his phone to landscape view and now the width is more than 492 and I would want to load another image.
How to handle this scenario.
Hi, I am trying to use this with multiple selectors. I have two different instances of the plugin and it doesn’t seem to work.
var bLazy = new Blazy({
selector: ‘.lazy’,
});
var ILazy = new Blazy({
selector: ‘img’, // all images
src: ‘data-orig-file’
});
Hey Steven.
If you want to add multiple selectors just pass them together like this:
var bLazy = new Blazy({
selector: ‘.lazy, img’
});
It won’t work when you create two instances because you can’t have multiple identical event listeners: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Multiple_identical_event_listeners
Hi.
This is a cool plugin so well done.
I was wondering if you had any working example or codepens of the ability to multi-serve responsive images because I can’t quite get it working.
Thanks for you help
Alan
Hey Alan.
Thanks. Have you tried to follow the guidelines in the responsive images example and multi-serve example?
Hi thanks for the great plugin, i am trying to add Blazy to slider but i alwys get this error in firebug :
TypeError: dataSrc is null
var dataSrcSplitted = dataSrc.split(options.separator);
would you help on this, thanks Again 🙂
Hey jone.
Just tested my demo page in FF and no issues here. Are you seeing the same issue on my demo page: http://dinbror.dk/blazy?
If not, do you have a live example or codepen? Have you defined a data-src on the image/element?