Sometimes it's not working unless I scroll ...

[arkan]

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 ?

[arkan]

If that can helps, I've switched to the the lazyload plugin, and I had the same issue unless I set skip_invisible: false.

https://github.com/tuupola/jquery_lazyload/issues/138

[lkarsten]

Setting width on the img solved this for me.

[machal]

It is Webkit-related issue. (Tested on Chrome+Safari/Mac.)

When images are in viewport, Unveil doesn't load them unless user scrolls or reloads page.

[hayzenbairg]

how can i fix the webkit-related issue?

[LasseRafn]

Any information?

[LasseRafn]

I found a solution!

Set image height and width () and you should be good :+1:

[tonygustafsson]

Yes, setting width and height seems to work! I'm using this plugin along side ImageResizer and it works great :)

[maxtoroq]

To me, the issue is not random, but specifically when I refresh the page. First load always work.

[npiasecki]

I experienced this too on WebKit browsers. I moved unveil() in $(window).load() instead of $(document).ready() and that seems to have done the trick. I think it was being called before rendering was finished and the container size was realized:

    <script type="text/javascript">
        $(window).load(function() {
            $('img.unveil').unveil(200);
        });
    </script>

(In my case the images have a percentage width and auto height, so I couldn't do the explicit height and width workaround.)

[maxtoroq]

@npiasecki The loading image needs explicit height and width, not the actual image. I do this:

img.lazy { 
   width: 120px;
   height: 90px;
}

$('img.lazy').unveil(200, function () {
   $(this).removeClass('lazy');
});

[fnagel]

@maxtoroq Thanks for the hint!

Needed to set dimensions in CSS to make unveil work in latest Chrome.

[daviddoliver]

I am a little late, but if you know 'approximately' how many image you can force them to be displayed using trigger(). I have a grid and I know that a max of 9 images are displayed when the page is first loaded:

$('img.img-circle').slice(0, 9).trigger('unveil');

[fadomire]

you could also try to let browser finish any dom related work before executing unveil, that is initializing unveil in a

setTimeout(function () {

}, 0);