v2.0.0 - WIP

[luis-almeida]

Apologies for being the worst project maintainer on github.
I just recently found the time to go through all the open issues and pull requests to see what you guys actually expect from this (little) project.

THis is what I propose for version v2.
While trying very hard to add as less code as possible I think the few additions will "satisfy" most of the feature requests.

Here's what's new.

A few options were added and the defaults are:

$("img").unveil({
  container: $(window),
  threshold: 0,
  debounce: 0,
  custom: false
});

We can still triger:

$("img").trigger("unveil");

and

$("img").trigger("lookup");

The callback function is gone but we can now use the unveiled event to achieve the same goals:

$("img")
  .on("unveiled", function() {
    // "this" refers to the image's DOM node
  })
  .unveil();

If you're still wondering what the heck is the custom option about, IMO is probably the nicest addition when combined with the newly documented unveil event:

$("li img")
  .on("unveil", function() {
    var $img = $(this), attr;

    attr = matchMedia("(max-width: 640px)").matches ? "data-src-iphone" : "data-src-whatever";
    $img.attr("src", $img.attr(attr));
  })
  .unveil({ custom: true });

I was inspired by all the comments and especially PRs opened on this repo.
I am very sorry I didn't find the time to review some of those PRs but v2 was basically made possible by them.
Big thanks to you all!

I'm going to keep this PR open for a while hoping for feedback.
There's probably still bugs to fix and I intend to write some tests as well.

[o-l-e]

Hi, this is really nice, especially the matchmedia images.
One question though (this may be stupid), but will i need a matchMedia polyfill to support IE9 for this?
And how would i (if needed) go about implementing this?
http://caniuse.com/matchmedia

I am using Modernizr in my project, and i can't figure out if modernizr only checks if matchMedia is supported.

Keep up the good work, i really look forward to the release of this.

[o-l-e]

EDIT 2:
My problem is: how do i combine the custom image src with callbacks?
I can get the one to work without the other, so i must be doing something wrong.

To explain what i am trying to achieve, here is my CSS and JS.
Note that i am trying to add a class to the unveiled images.

JS:

function customUnveiler() {
    var $img = $(this), attr, src;

    if (matchMedia("(max-width: 640px)").matches) {
        attr = "data-src-small";
    } else if (matchMedia("(max-width: 768px)").matches) {
        attr = "data-src-medium";
    } else {
        attr = "data-src-large";
    }
    $img.attr("src", $img.attr(attr));
}

$(document).ready(function() {
    $("img").on("unveil", customUnveiler).unveil({ 
        // container: $(window),
        threshold: 100,
        debounce: 0,
        custom: true
    });
    $("img").on("unveiled", function() {
        $(this).load(function() {
          // this.style.opacity = 1;
          $(this).addClass("unveiled"); // add class to unveiled images
        }).unveil();
    });
});

CSS:

img {
    opacity: 0;
    -webkit-transition: opacity .3s ease-in;
    min-height: 200px;
}
img.unveiled {
    opacity: 1;
}

Hope you can point me in the right direction here, i would be really greatful.

Thanks

EDIT:
actually i think my problem is with the callbacks, as the callbacks are not kicking in on images that are visible in the viewport on load.

Hi, there is a rather big bug (using the screen_size.html demo).
Images that are in the viewport when you load the page are not loaded.
Try removing the html above the images in the screen_size.html demo to see what i mean.
Or am i doing something wrong?

[o-l-e]

Hi again,

i am having a couple of problems with the v2 version:

• i can't get "lookup" to work (latest Safari). Is this function working on this version at the moment?
• the threshold is not working correctly. For example when i set threshold to 1000, the second image(first image below the viewport) does not load. At the moment i have set the threshold to -1000 as a workaround, for now.

Keep up the good work!

[Mhely]

Hola, me gustaría hacerte una pregunta por privado pero no veo la manera porque no entiendo esta pagina. Si puedes contactar conmigo por aquí. o en el correo dae-dur@hotmail.com
Muchas gracias

[slaFFik]

@luis-almeida Any update on this?

[mvdmakesthings]

@luis-almeida Any update on releasing v2.0?

[hongaar]

There are several forks and useful PR's at the moment. What about joining forces to discuss what we can do to help push this repository to a next version?