In order for unveil2 to work well as an NPM package, your package.json file ought to specify

 "main": "src/jquery.unveil2.js"

As it stands, I can't, for instance, use it with WebPack, because WebPack doesn't know which file to load when I require "unveil2" in my code. (The default value for main is "index.js", but you don't have a file by that name in your build.)

HI!

Trying to get this, and its predecessor, to work with webpack but to no avail.

I get: Uncaught TypeError: $ is not a function.

I also tried with the imports-loader module, but still not working.
I also tried to use the unveil2 npm package, same result.

This library is the only one preventing me from moving to Webpack...

Thanks.

I´m wondering about the best method to add a preloader indicator for each image. I though that adding a width & height for each element would be enough, but it seems that even if I add the sizes the images are scaled somehow from 0 to width (if you add css transforms you can check this better).

Then, which should be the best method to preserve the layout sizes before unveil images? Could you please suggest a good method to add a preloader indicator vertically/horizontally centered within the item area?

Thanks!

To make it easier for developers to switch from the original unveil to unveil2 and possibly to the new fork.

I've been using unveil successfully across an entire site, however when using an img tag inside a carousel, (specifically nivoslider) unveil loads the placeholder pixel and only switches to the src if a scroll is triggered while the image is displayed in the carousel.

If I use a div it will set the background image from data-src or breakpoint-src immediately, this issue seems to be specific to img tags.

Could unveil instead more reliably check that a parent element is visible? Even better if we could set the trigger element via a data attribute, that way I could get unveil to load the entire carousel as soon as it appears on screen, ensuring transitions animate correctly.

See http://qnimate.com/lazy-loading-images-and-its-seo-impact/

Since Wordpress implements this feature natively, it would be awesome seeing the plugin to handle images sets :)

For version-managed bower asset load. Like https://github.com/luis-almeida/unveil/blob/master/bower.json.

For better findability.

What do you think?

When i.e. Bootstraps img-reponsive class is used, a image jump can be seen after loading the placeholder image, and after loading the final image.

Related: #15 (comment)

Hi Joram!

I´m wondering how the best to prevent the 'jump' when loading images. I have set up width/height via img attributes for each element, but they still are jumping when unveil loads because the plugins removes the original picture.

Do you have any guideline in order to fix this issue?

Thanks!

I demand 100% code coverage! 😄

Should be 2.0.5

See https://github.com/luis-almeida/unveil/tree/v2
Will break API

• use opts
• use debounce?

Hi,

first of all, thanks for continuing/forking and improving this great plugin!

I have done a quick approach in a website I´m working on and I have realized that images are downloading once the document is loaded, then, as you scroll the page, the images are downloading on demand, but they are twice loaded. First time when the page load (all images with lazy class are downloaded) and again when you scroll ('on demand').

An approach without need to add script tags would be great, but I´m not sure if this is correctly controlled or if I´m missing something.

In my implementation I´m using the same image path within the src attribute and within data.

Hope you can send some light on this! Thanks! 👍

Hi @hongaar !
grunt-contrib-qunit uses a very very outdated qunit 1.18.0 which does not support even nesting inside Qunit.module. Its updating seems to be postponed gruntjs/grunt-contrib-qunit#123. What do you think about grunt-contrib-jasmine?
Offtopic. Wdyt about changing grunt to gulp?

Safari (9) doesn't cancel loading of images when setting src attribute to an empty string ("")

i.e. like implemented in skroutz@d7b4301

Get inspiration from twbs implementation: https://github.com/twbs/bootstrap/blob/master/Gruntfile.js#L375