search

dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 356 forks source link

[Suggestion] Auto src attribute #88

Closed TomS- closed 8 years ago

TomS- commented 8 years ago

Hello,

Just a thought while using bLazy. (Great work by the way).

Would it be possible to check if a src attribute is set on an image, if not auto assign: "src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

Purely just an ease-of-use sort of thing really. It saves having to look it up when starting projects or keep it on the clipboard. I'm not entirely sure how elegant this is, I just know bLazy doesn't work with no src set and if I recall LazyLoadXT does this automatically which is quite useful.

dinbror commented 8 years ago

Thanks @TomS-

I'm not sure what it would gain when you're adding it with scripting? There is nothing that prevents you from not having any src on images and only a data-src. Blazy supports that.

TomS- commented 8 years ago

Hi @dinbror

For some reason lazy loading only seems to work for me if you have "src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" or some sort of src image set. I don't mind setting src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== manually and it isn't too much of a big deal. I just thought I would fly the idea past you :-)

dinbror commented 8 years ago

Could it be because your images with no src is 0x0? I always recommend saving the space for an image to avoid repaints/reflows like in my responsive example: http://dinbror.dk/blog/blazy/#Responsive