luis-almeida / unveil Goto Github PK

Hello!

First, thanks a lot for your work, this plugin is really nice and the code pretty clear!!

So I wanted to know if you expect to add a call back to Unveil? Something like:
$("img").unveil(200, function(){
//alert()<image loaded
});

What I have in made is to be able to add a fade effect, or animate...

galaxy note, chrome.
work only if data-src is before src

Is it permissible to do:

$("#pannellax2").unveil(200, function() {
$(this).load(function() {
this.style.backgroundImage="url('http://www.lenovo.com/images/gallery/1060x596/lenovo-tablet-miix-2-11-inch-front-15.jpg')";
});
});

Following the discussion about the need for a callback, it seems that it was intended to be an optional thing. I think it would be pretty easy to check that callback exists and is a function before calling it. Something like:

if (typeof(v) == "function") {
    callback.call(this);
} 

...should do the trick. I would just do a PR myself, but it appears tag 1.2.0 isn't even off master, so might be easier to just do this yourself in your futures branch or whatever.

Also, FYI... I encountered this because bowers now pointed at 1.2.0 as current.

Zepto does not support is(":hidden"))
So if ($e.is(":hidden")) return;
errors out for me:

SyntaxError: An invalid or illegal string was specified
Zepto(t=img.needs_loading 47349490...7824.jpg, e=":hidden")

I'm trying to implement unveil in a Wordpress-based site. It should target only a specific range of images - however, the images seem to load instantly, not when they are coming into the viewport.

What could be the problem here?

Thanks,
Jürgen

I want to replace content by jquery's load() function including images which are prepared for unveil correctly (data-src). But both scrolling and manual triggering after the load process with container.find('img').trigger('unveil') doesn't work.

Hello,

I use the great script for the first time and everything is GOOD!

I have a question. If I habe "unveil-image" in hidden elements, fo example in accordion-divs or tabs, the images are not display. If I reszie or scroll, then the images are display ... thats the function! In know!

Is there an opinion that I can display the image with an click-event. For example. If I click the .head-element that unveil-image in this child-element .child-element are display.

Or can I start the function unveil() with a click-element?

Thank you very much!

Greetings Steffen

Hi guys,

the query plugin is not working if you use a container with the CSS Attribute
-webkit-overflow-scrolling: touch;
which is very commonly used in iOS and Android Websites and Web Apps.

Cheers
splatterb0y

Hi!

What would be a simple solution to serve unveil two different data-src-retina-paths? One for a mobile screen size and one for the desktop?

I think it's a common use case but i don't have any idea how to solve it. And I didn't found any well documented solution, so i would be happy if someone will add a solution here :)

I am trying to implement unveil on every page in my website.
So i just write the src of all images on page load in the img-data-src.

See here:
http://jsfiddle.net/g5JxF/

Thanks for your very nice plugin :-)

Woult it be possible to add a .class to te image after it was loaded?

I might be using the plug in wrong but on a retina screen the images were loading the retina images but double size. Adding the following to the this.one("unveil") function fixed the problem for me:

    var height = this.height;
    var width = this.width;
    if(retina){
        this.setAttribute("width", width);
        this.setAttribute("height", height);
    }

The full function now looks like this:

    this.one("unveil", function() {
        var source = this.getAttribute(attrib);
        source = source || this.getAttribute("data-src");
        if (source) {

            this.setAttribute("src", source);
            var height = this.height;
            var width = this.width;
            if(retina){
                this.setAttribute("width", width);
                this.setAttribute("height", height);
            }
            if (typeof callback === "function") callback.call(this);
        }
    });

As I say i may be doing something wrong but this is the only way I could get it to work.

Cheers

Now this is just an idea but what if instead of a spinner while images are loading we have this (https://github.com/rstacruz/nprogress) I think it's a great use for the progress bar. BTW love the simplicity of unveil ;)

Hi, that library is compatible with all major browser? And IE8 and IE9?

Hi,

I've just tried to use unveil.js with zepto and always got an javascript error.

After some investigation I think it is linked to a missing check on Zepto against ":hidden".

I suggest a check like:
if($e.css('display')=='hidden' || $e.css('visibility')=='hidden' || $e.height()==0) return;

which seems to work in my tests.

Regards,
Torben

When we have a page like this, unveil starts unveiling all images. But maybe just the first is inside the window after loading:

<img src="image1.jpg" ... />
<img src="image2.jpg" ... />
<img src="image3.jpg" ... />
<img src="image4.jpg" ... />

Second problem: We cause lots of traffic before the page is completely loaded. So let's start unveil when the small images are already there.

Instead of

$w.scroll(unveil);
$w.resize(unveil);
unveil();

I use this:

$w.scroll(unveil);
$w.resize(unveil);
images.one('load', function() {
    $w.trigger('scroll');
}).each(function() {
  if(this.complete) {
    $(this).trigger('load');
  }
});

Now there is still a bug: image2 unveils after loading even if it is kicked off the screen by image1. Unveil shoud start after all thumbnails are loaded. Maybe you have a better solution.

Hi,

When i use IE11 on my computer screen, retina pictures are display cause window.devicePixelRatio = 1.0499999523162841.

Thanks and congrats for your work :)

If you use unveil on a mobile device it doesn't start loading the images in the initial viewport until the user scrolls for the first time.

there is NOTHING at all in the javascript file regarding the stuff you mention on the README page. is this a joke or what?!

EDIT: oops sorry I just read it again thoroughly and it appears you mention these things with regard to another plugin and not yours. wish I could delete this issue.....

At the moment I use a very small base64 gif as a placeholder, but shouldnt it be possible to use a css class instead? By doing so it can be even smaller and it would be very easy to create custom placeholders with logos on sites with various content (like videos and music)

I have some logic on a page and there's a few images that I don't want to show and I've set them to display:none if the outer div class is set to ".test" Problem is that, even though, these images are way down on my page, they are still loaded at page load. Is this normal behaviour?

I was counting on the lazy loader to never load those images because they never come into view.

Thanks

in:
this.one("unveil", function() {

added:
var original = this.getAttribute('src');
this.onerror = function(e) { this.src = original };

Great if the image fails it reverts back to original instead of broken image.

the minified version is missing the :hidden check

Thanks a lot for your work!

I'm trying to get this to work with Adaptive Images (http://adaptive-images.com/).
Result: the images are resized correctly, but they don't lazy load any more.

Any ideas how to fix this? (I want to use it on a page with a lot of pictures, so I definitely need to lazy load them.)

During loading if you scroll completely down before that the images are loaded, when the image is loaded kick scroll up

I am using this library for loading @2x images for retina display devices. But it is always giving me images without retina display even in retina devices.

I came to know that problem was in window.devicePixelRatio,
which is not available in ipad Mini safari.

I resolved this issue by adding a method to check for retina images.

When using jQuery mobile and the user is in another page, or when using collapsible boxes and the image is collapsed, Unveil will load the big image.

Just add this to the filter function:

if ($(this).is(':hidden')) return false;

On the demo site, i can't seem to load images 6, 7 and 10 on ios6 and 7.

I tried the demo before and after i recently upgraded to ios7, both safari, and was disappointed that these images didn't load. I really like this script, and would love to use it, but i need to know that it will work.

All i get are "missing src" squares on these images.

Anyone else have this issue?

Ps: I have a very good internet connection, so that can't be the reason.

Is it right?

<noscript>
  <img src="bg.png" data-src="img1.jpg" />
</noscript> 

As I mention it loads bg.png instead of actual img1.jpg.

$("img").trigger( "unveil" ); as far as I can see, loads all the images in a page.

$("img").trigger( "unveil-visible" ); would be nice since an image's position may change without scrolling, eg; with filters or sorting items etc. For instance, imagine a product list with filters, which hides some items with javascript. After applying that filter, unveiling only currently visible (in the view-port) images is necessary.

Hi there

I seem to be having issues getting the plugin working in IE8 alongside Modernizr.

I'm using a basic build of Modernizr with just the html5shiv and Modernizr.load options, but as soon as I remove the reference to modernizr, the script works fine.

I don't know if its a deeper issue in that modernizr is conflicting with anything else (I have unveil working alongside Isotope, but Isotope is working fine) so I was wondering if there were any known issues with this?

You should give the option to set our own "el" on which scrolling is performing.

Resolved this issue by adding a parameter "el" in the function, which will give me the jQuery object in which scrolling is performing.

Hi,

Sometime when I load the page, the images are not "unveiled" unless I manually scroll the page.

It's not every times but I would say 50%.

Any idea why ?

I wonder if unveil works with a slider carousel?

I'm using Meteor that refreshes parts of the page automatically and when unveil() is called multiple times, it blanks out the images because it doesn't check if the data-src attribute exists already. It needed a 2 line change:
this.one( "unveil", function(){
source = this.getAttribute( "data-src" );
+++ if (source != null) {
this.setAttribute( "src", source );
this.removeAttribute( "data-src" );
+++ }
} );

p.s. thanks for this plugin. The lazyload plugin was really flaky (needed you to move the scrollbar before the first page of images displayed) so it was unusable for me :-(

Is it worth debouncing or throttling Unveil's scroll and resize events to improve performance?

Some resources:
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
http://benalman.com/projects/jquery-throttle-debounce-plugin/
https://github.com/mekwall/jquery-throttle
http://www.hnldesign.nl/blog/debouncing-events-with-jquery/
http://stackoverflow.com/questions/6382956/new-version-of-lazyload

Thanks for the great plugin.

Does this only work when a user scrolls to an image? I have a very large table that is split using jQuery Data Tables into multiple pages. I'd prefer to lazy load the images only when the "page" containing the images is visible.

Thanks.

I have a sortable portfolio where I'm trying to integrate unveil.js and I'm having issues with the sorting part of the situation.

Unveil works awesome (LOVE the lightweight functionality) when simply loading the page, however when you sort by any of the parameters it screws with the lazy-loading. Any thoughts on how to fix this?

For reference I'm using Quicksand 1.2.2, Easing 1.3, and a script to bring it together that can be found here: http://www.oldtownmediainc.com/wp-content/themes/otm/js/script.js

Here is my testing page:
http://www.oldtownmediainc.com/testing-unveil-page/

Thanks you in advance for any help!

I'm new to jQuery and I'm unsure if I am using this correctly.

I set unveil up on the images I have in the dropdown section of the site (under work). I think I set up everything correctly according to the docs. However, once revealed the image isn't switching from the loading image to the actual image. I think it might have something to do with the version of jquery I'm using. In the demos for you are using 1.9.1, but I need to use the jquery that came with my expander plugin for that to work. Here is my website where you can find all of the code:

http://histeph.com/

确实要比Lazyload好用。

Hey man,

First off, shot for this cool plugin, just what I normally need for basic lazy loading.

Just a friendly question to ask whether it would be possible for you to add this to Bower.io, so it's easier to include it in projects?

Hey this looks great, I tried adjusting for a horizontal container rather than the default vertical scrolling - and it works to show just the visible images, but doesn't do anything on scroll. Probably because I replaced "scrollTop" with "scrollLeft" which I sort of made up!

Here is what I adjusted:

function unveil() {
  var inview = images.filter(function() {
    var $e = $(this);
    if ($e.is(":hidden")) return;

    var wt = $w.scrollLeft(),
        wb = wt + $w.width(),
        et = $e.offset().left,
        eb = et + $e.width();

    return eb >= wt - th && et <= wb + th;
  });

I'm using the popular Masonry plugin: http://masonry.desandro.com/ and Zepto

Unveil doesn't seem to trigger on scroll, does it have anything to do with the fact Masonry positions the images absolutely? If I resize my browser the images pop in correctly, but not on scroll in this example.

Currently the CSS pixel ratio support requires a lot of manual labor, is not scalable and does not support 3x displays such as the HTC One, HTC DNA, Galaxy S4, Oppo Find 5 and the LG Optimus G Pro.

Instead of explicitly declaring a src-retina attribute, why not allow us to declare the file naming convention of high density images. By default it would be '-retina' or '-2x' but we could support '-%N%' to
indicate a natural device pixel ratio and '-%Z%' to support fractional pixel ratios using a fancy back end.

That would be scaleable, but not entirely practical for many applications due to bandwidth constraints. The best alternative would be to send headers/cookies to the server and let it determine what experience we will receive based on the connection type and density. This would require a lot of back end support. But the end result is quite elegant, as the server could choose to serve 2x images to all 3x devices that are not on WiFi or LTE. The default connection would be 'unknown'.

Then again, support for both is not a tall order. Though at that point, it starts to become its own script.

The new retina-function is very very neat, but having this plugin to serve multiply images based on screensize would be even better.

As you can see here: http://blog.netvlies.nl/design-interactie/retina-revolution/
its best to serve retina no matter what, so by including multiply mediaquery-based image loading, this plugin would fix sooo many problems when working with images.

Hi,

I have implemented lazy loading on our website, and testing within IE9+,FF and chrome, it works completely fine in IE and FF, but on chrome there is a noticeable flash of the image being loaded when it is inside the original view port(i.e what the customer sees without scrolling).

I see you already have similar issues #9 and #16 but since my post is quite elaborate, I would like make a separate request. I agree with @Reyncor that the retina method is too rigid in a world of responsive designs, and there are additional reasons by example:

In a responsive design, I might have a default 800 px wide image, that scales down to 320 px on an iPhone 5. The image will therefore already be retina-ready for the iPhone and I don't want to load a 2x file for this device. However, for devices like iPad 3, it would make sense to load a 2x file. In another scenario, I might have thumbnails in columns where I in fact do want to load 2x for all retina devices. What does this mean? Simply put, it means we don't really want the retina alone to dictate what image we should be loading. There are two solutions:

Media-query-like data-src
I have done a lot of research on how others are solving this problem, and by far the best and most flexible solution I came across is the Interchange plugin from Zurb, which uses media queries directly in the data-src:

data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1024px) and (min-device-pixel-ratio: 2))]"

This allows full flexibility to load multiple image-sizes based on device screen size, pixel-ratio and orientation. http://foundation.zurb.com/docs/components/interchange.html

Multiplier
In many cases for images in responsive designs, a threshold value can be calculated by pixel-ratio * device-width. However, this method is not flexible and only applies to certain scenarios.

I prefer to avoid being limited to naming conventions for different file-sizes, because I use a CMS with an image processor where images can be called by URI like this '/render/w730-h-c3:2-q95//file.jpg'. This is one of the reasons I liked unveil in the first place, because we can set names independently.

I know unveil is supposed to be simple, and I wouldn't normally request such a nice simple plugin to do more than it is supposed to. However, the image-switching mechanism is a single process, and you can't really have multiple scripts competing to set the image src! Right now, I am using a custom unveil JS adapted to work in similar fashion as method 1 above.

Thanks!