Need $("img").trigger( "unveil-visible" ); about unveil

[TheEskhaton]

wouldn't that be easily achieved by calling .trigger('unveil') on lets say the images that the sorting/filtering script has shown?

[ErtugKaya]

Thank you, but does not that includes writing a script for detecting images that are on view-port? What I meant is unveil should be aware of which images to load, by triggering or automatically.

Please take a look at this similar project and similar request: tuupola/lazyload#58

[TheEskhaton]

Hmm yeah i guess it isn't that simple as a thought it was.

[MarkReeder]

You can trigger unveiling of visibile images with: $(window).trigger('scroll')

[Yahasana]

$("img:visible").trigger( "unveil" )

[joeldbirch]

I'm wrestling with this also. The images in the viewport do not load on iOS Safari until a scroll occurs. The proposed workarounds don't seem to work. @MarkReeder's idea doesn't cause the images to be loaded on iOS Safari and @Yahasana's idea loads all of the images as if they are all visible.

The logic for detecting whether the image is within the viewport is within the private function unveil so I guess that just needs to be exposed somehow.

[joeldbirch]

I have this horrible workaround working in iOS Safari. It's horrible because it uses a timer to fire code that is a duplicate of what already exists within the plugin. Also, the length of the timer is unreliable—a timer of 10ms doesn't work, for example, and sometimes 100 doesn't work. I'm not sure what that is based on, but possibly image loading time?

// set a threshold
var th = 200;

// apply unveil behaviour to images
var images = $('img');
images.unveil( th );

// force iOS Safari to load images that are visible on page load
setTimeout( function() {
    inview = images.filter(function() {
        var $e = $(this),
            wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();

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

    inview.trigger("unveil");
},100);

[ErtugKaya]

Thank you guys for all your ideas. Joeldbirch's solution is a good pointer, but as he mentions, we need to get rid of the timer.

[luis-almeida]

@ErtugKaya, @joeldbirch, Sorry "I'm late to the party", but here's my feedback:

You could extend jQuery with an :inview selector and then do the following after a filter as been applied:

$("img:inview").trigger("unveil")

You can grab the code for this selector from this gist.

Doing this through unveil is fairly simple as well. You can grab the "forked" code from this fiddle.
Then you could simply do the following whenever you want to show all the visible images in the viewport:

$(window).trigger("unveil")

[joeldbirch]

Thanks @luis-almeida. This certainly seems like it will help, but I wonder if you have any input on the iOS issue? The code you've added here probably still doesn't address that, or maybe I'm missing something. And I guess this should be moved to its own, separate issue.

[luis-almeida]

@joeldbirch are you initializing unveil after the document is ready?
I'm sorry but I'm not really understanding what the problem with iOS is.
Could you please open a separate issue with the description of the problem and a way to reproduce?

[joeldbirch]

Yes, initialising on document ready (or even window load) does not unveil images in iOS Safari until the user manually triggers a scroll event. I'll open a separate issue and provide a test case as soon as I can. Thanks again.

[luis-almeida]

Hmmmm... Then it's a bug and I have to take a better look at it.
Thanks!

[joeldbirch]

Actually, it looks like #20 is the same bug and has a pull request with a possible fix!

[joeldbirch]

Maybe I got too excited there. Not sure the patch submitted is a proper fix.

[luis-almeida]

I don't think that running unveil on load might fix it.
I have to take a better look at the problem.

[CourtFantinato]

Hello,

I am having the same issue as the original poster. I am wondering since this thread is a few months old if there is a updated way of addressing content that gets filtered, or if using $("img:inview").trigger("unveil") is the only way at this point? I am currently using it, but I am finding it still doesn't work properly. Some images are in view but aren't shown until I scroll.

Thanks!

[hughred22]

I am having the same issue. I use Isotope to filter images. When window finish loading, the images will not show until scroll. When filter apply, it will not show until I scroll...

[zachcarroll]

any updates on this? I ran into this exact same problem... On page load, images don't load, I find I need to scroll to trigger unveil. Any cross-browser way to trigger unveil on only images in viewport on page load?

[Tyler-Hall]

@zachcarroll It seems as though you can add a load.unveil to the .on() function to fix the problem where your images don't load until you scroll like this

$w.on("scroll.unveil resize.unveil lookup.unveil load.unveil", unveil);

instead of the original

$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

let me know if this was a suitable solution

[zachcarroll]

Tyler,

Thank you very much. My attention has shifted elsewhere for the time being, but when I get back to this project I will definitely reach back out to you to let you know how it went. Thanks for your time on this!

Best,
Zach

On Jul 29, 2014, at 8:54 AM, Tyler Hall [email protected] wrote:

@zachcarroll It seems as though you can add a load.unveil to the .on() function to fix the problem where your images don't load until you scroll like this

$w.on("scroll.unveil resize.unveil lookup.unveil load.unveil", unveil);
instead of the original

$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
let me know if this was a suitable solution

—
Reply to this email directly or view it on GitHub.