sebarmeli / jail Goto Github PK

View Code? Open in Web Editor NEW

571.0 571.0 117.0 4.05 MB

JqueryAsynchImageLoader Plugin for jQuery

Home Page: http://sebarmeli.github.com/JAIL

License: MIT License

CSS 0.38% JavaScript 99.62%

jail's People

Contributors

Stargazers

Watchers

Forkers

dlindahl tmuellerleile jtmkrueger humancopy eddywebs jessebeach raghulkrish crlcu ddre54 leison cun manuelllop asinox martajohnsson sime viklov mastermind696 rajesh1213 marsan1973 blue148 jarc100 cnojima rud5g theodule markstreich hansthinhle mnishihan urbancompass jaydub2099 andersonboeira kazmatch mwuestner paratron echoes boy01 tbarmann soumyadipta-int goliatone eallegretta cleberjsantos condemelgar royarin markpavlitski victorga tracyfloyd jednano jamoozy marchimedia wenxiangtune paulahfaria nickp-sau dasthagiri123 dannyrubenma adrianhermann nopnop77 singh-prabh joeyjy chloedigital nchls douradoweb arnaldoroman masakre laizhengfu vivekkjha agung-wete ni4ego-li4nogo wmelton sandeepmca24 willianpts aplewe aikon78 patoshii drjova mfa jefflembeck curious jhojav malisetti ghulammurtaza bojio billeee jingyichushi itelligence jtrascap danbrown1113 freador mzaideel icorradi shylajaiksula imargo sinabio honzakadlec saimana tyronewo laressource kieregh lucasfisker mufaddal-aydus moeart bwebteam

jail's Issues

Resizing the window should affect ho the images are loaded

from version 0.8

Still loads hidden images

I'm showing JAIL loading hidden images with jQuery v1.7.2 using the following configuration. Is the jQuery version the problem?

var $jq=jQuery.noConflict(); $jq(document).ready(function($) { $jq('img.lazy').jail({ event: 'load+scroll', timeout : 1000, loadHiddenImages : false, }); });

<img src="Lines.jpg" style="display: none;">

Visible images doesn't load in desktop browsers if image height is not set

There seems to be a problem in desktop browsers (Chrome/Safari) with lazy loading images that doesn't have a height set. If you scroll up, the images loads though.

I can reproduce by modifying example1_basicCall.html into this:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>jQuery Asynch Image Loader - Example 1 - Basic call</title>
        <link href="css/style.css" rel="stylesheets" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="../jail.js"></script>
        <script type="text/javascript">
            $(function(){
                $('img.lazy').jail();
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div class="content">
                <p> Images visible in the viewport loaded after DOM is ready</p>
                <div>
                    <img class="lazy" data-src="img/sample1.jpg" src="img/blank.gif"/>
                </div>
                <div>
            </div>
        </div>
    </body>
</html>

jQuery 1.2.x+ for Drupal 6 sites

Hi,

I'm a developer and I working with Drupal 6 that use jQuery 1.2.x+ version, what's the big different to support this librarie?

Because I see this another pluggin. http://www.appelsiini.net/projects/lazyload and it support the jQuery 1.2.x+

If you tell me the different or not supported function may I can a backport for jQuery 1.2.x

thanks regards.

Images inside a DIV container not showing up after scolling

This is the scenario:

a div having a height and overflow: auto defined
some images inside a div so that scrollbars are shown.

If you scroll down inside this "div", the images at the bottom of the div (not visible at page load) are not shown.

Doesn't detect viewport when used in an iframe

I have an iframe on this page http://libguides.bju.edu/extension that loads this URL which uses JAIL
http://duncanandmeg.org/libguide_mirror_files/bibliographies/biblio.php?list=extension

Although JAIL works fine on the source page, it seems to me that it thinks the iframe size is the dimensions of the viewport on the page with the iframe. As a result, it doesn't seem to respond to the scrolling properly. Is there any way to properly access the viewport from inside an iframe?

Bad performance

On a page with 50 images I get a 150 ms initial processing time on a highend (i7-3770) computer. That is way too much time spent on such a simple task. I didn't go through the JAIL code to see what makes it so slow and instead wrote a simple replacement code to load the images once JS is ready.

Additionally this image loader performs poorly on iPad, it takes a long time for the images to appear once user has scrolled the images to view.

How to use cache to not reload the images from scratch once the page is loaded

Hello ,

I have implemented the Jail in my mobile Web App .
The images are loading from scratch all the time . Like in Index page if I refresh the page two times it loads the images again . Instead of getting it right from the cache .

So it there a way I can fix this problem
I am using a basic call only

Thanks

same image twice

In the network tab of the web developer tool I am able to see two images for the same image...can you tell me why its happening. In your example1_basicCall.html file I am able to see two images for sample1.jpg and others too.

Updating to jquery 1.9.1 speed issue

I recently updated jquey to 1.9.1 and now the scrolling of the page is very slow and laggy on firefox 21 (windows 7) when jail is loaded. Jail is still loading the pictures normally and it's still smooth on my imac and iphone. Did anyone else noticed this ?

Use jail() to call JAIL

In the next version, jail() will be used with asynchImageLoader() to call the plugin

ignoreHiddenImages + redrawing part of DOM

When I use Jail with ignoreHiddenImages set to true and then rerender or remove part of DOM, where one of the images was, then scrolling through the page triggers an error:

Uncaught TypeError: Cannot read property 'tagName' of undefined
$.asynchImageLoader.$.jail._isVisibleInOverflownContainer / jail.js:322
$.asynchImageLoader.$.jail._loadImageIfVisible / jail.js:269
_imageLoader / jail.js:174
jQuery.extend.each / jquery-1.6.1.js:641
jQuery.fn.jQuery.each / jquery-1.6.1.js:265
$.asynchImageLoader.$.jail._bufferedEventListener / jail.js:173

doesn't load images, when hiding other container with hide()

when hiding divs (hide() / display:none) images which are currently not visible inside the browser "window" are not loaded when they came in the view.

is there a workaround or something like a custom event?

How to use JAIL on ajax pages?

Hey,

I have a website with some ajax content. The content of the main page and the content loaded via ajax contains images where a want to use jail for loading.

So in the main page I call JAIL

`````` $('img.lazy').jail({effect:"fadeIn"});```

and after loading each ajax content inside the main page, I call JAIL again in this way:
$('img.lazy').jail({effect:"fadeIn"});

Is this the right way it should be called again?

If I do so, I get a lot of these errors (after loading content via ajax):

a.asynchImageLoader.a.jail._isInTheScreen  -  scripts.20111104.js:172
a.asynchImageLoader.a.jail._loadImageIfVisible   -   scripts.20111104.js:172
e   -   scripts.20111104.js:172
e.extend.each   -   jquery.min.js:2
e.fn.e.each   -   jquery.min.js:2
a.asynchImageLoader.a.jail._bufferedEventListener   -   scripts.20111104.js:172```
(jQuery 1.6.4)

Update jail.min.js

Could you please update jail.min.js? The version here doesn't have the latest pull request fix (i.e., the one with the namespace to the events). It was clobbering my event listeners and I couldn't figure it out until I realized the jail.min.js doesn't match jail.js.

Thank you!

Would this plugin work for background-images?

Handheld devices

Images have delay when loading on handheld devices.

summary details component is broken

Use HTML5 data attribute rather than name

HTML5 data attributes (http://html5doctor.com/html5-custom-data-attributes/) are backwards compatible and perfect for this situation:

<img src="placeholder" data-href="…">

where the value can be retrieved using

 $("img").data("href").

onscroll error for removed objects

I'm not quite able to figure this one out, but I think it has something to do with the onscroll event not unbinding from objects that have been removed from DOM. I have JAIL active on many pages within JQM, but on some occasions, when moving from one page, back to another, I get the following error. JAIL still functions, but every scroll event shoots another error message. Thanks for the great plugin!

Uncaught TypeError: Cannot read property '0' of undefined
$.asynchImageLoader.$.jail._isInTheScreenjail.js:280
$.asynchImageLoader.$.jail._loadImageIfVisiblejail.js:272
_imageLoaderjail.js:174
e.extend.eachjquery-1.7.min.js:2
e.fn.e.eachjquery-1.7.min.js:2
$.asynchImageLoader.$.jail._bufferedEventListenerjail.js:173

Images fade in before they finish loading

Hi, while this is a great script which I really really needed, I'm gaving an issue that is rather cosmetic, but I would be very glad if it could be resolved. My problem is that images fade in before they load, so you actually see them loading instead of fading in. This happens only when there is some latency before loading the images (for example, when you load the page for the first time and the images are not being loaded from browser cache, especially on a slow connection). After a refresh, everything is working fine. Is there anything I can do to alter the code to make it always wait until the image is fully loaded? I have a nice preloader so I don't mind even if it takes a while :)

Will load images set to "display:none".

HOW TO REPLICATE:
If loading a page of 400 thumbnails, use jQuery to hide (.hide() or .fadeOut() )the first 350 thumbnails. The last 50 thumbnails will not load until the previous 350 (now hidden) thumbnails have finished loading.

EXAMPLE:
Use the "filter" links to show/hide thumbnails:
http://www.trevorpearson.com/dev/interest-filter/

RECOMMENDED FIX:
Add an a test to skip loading an image if it is set to hidden. Like this perhaps:
if(jQuery('img').is(":visible")) {
// Load image
} else {
// Don't try to load image
}

iOS scroll issue

Hi,

This is great for desktop but when i try it on iPad it is kinda different. When you scroll, this plugin waiting stop scroll and then showing images.

Is there a solution to fix this?

Thanks.

jail & iScroll

Hello

Some words 'bout touch devices.. JAIL is great - i love it.. but in my site i use iScroll 4, cause some layout with fixed elements exists... And there is no general Scroll event generates when it scrolls..

Is there any way to bind some own/custom events to JAIL?

Thank you

want to load first image then display remaining image while scrolling

Thanks for the great plugin.

I have integrated this plugin into Magento project. On each category, there are 1000 product. Out of that, I have show only 24 products.

When i access the page, all 24 products images displaying at a time.so it takes too much time to load.

Instead I want to display first 8 images and then will display according to scroll.

I have created jsfiddle.

https://jsfiddle.net/3escsmsg/7/

When I set height to auto, scroll event does not work. When I set height: 500px or specific value, it works. But i don't want to set height to specific value.

How can i achieve image load on scroll.

Issue on horizontally scrolling div

Issue in showing images inside a horizontally scrolling panel.

Translations updated

I try to use jail on mobile

The problem: the images that I would like to display is width: 100%, and I don't know the dimension (not fixed like 500 o 600 px) that I can find on a mobile.
Someone could help me? What I've to do? Try to catch dinamically che dimensions of the images and viewport?

required negative callback and image-on-fail

case: loading image, image-on-success-1, image-on-success-2.. image-on-success-N
or loading image, image-on-success, image-on-fail

and callback if image is not loaded

JAIL doesn't load images (outside the browser viewport) until scroll event

Hi.

Can someone help me with an issue? I post my case on stackoverflow [1].

[1] http://stackoverflow.com/questions/14444420/jquery-jail-plugin-doesnt-load-images-until-scroll-event

Thanks.

parent.get(0) is undefined

hello.

i'm trying to use this plugin, but always get the error

parent.get(0) is undefined
http://localhost/my_site/sites/all/libraries/jail/jquery.jail.js?m2rz84
Line 357

i'm tryin to use jail in a galleria slideshow. Should i have to insert a custom container or event trigger?

thanks

Event click to return false

event:'click' with an anchor (which uses href="#") for selector. Is there any possibility to put something like "event.preventDefault()/return false" in the function to prevent the typically #-jump to the top

Avoid "scroll" event on window

Attaching "scoll" event to the window object is considered a bad practice for performance http://ejohn.org/blog/learning-from-twitter/ .

Quite urgent fix

FadeIn not working properly

Few users noticed that "fadeIn" is not working correctly in examples 3,4 and 6 on my site

How to apply the plugin to images that are initially hidden when the page loads

We have a slide show plugin that displays large images in a full screen slideshow. Since the images can take up the full screen, users upload very large images for the slideshows. The slideshows run on auto transition mode.

I would like to apply the JAIL plugin to the slideshow images so that images are loaded only when a slide shows up. Since the slideshows are on auto-transition, no specific event occurs when the slides come into view. What would be the best way to apply the plugin to this scenario?

The HTML is as follows:

<ul class="slideshow">
    <li>
        <img alt="..." src="/images/slideshow1/slide1.jpg" />
    </li>
    <li>
        <img alt="..." class="load-lazy" data-src="/images/slideshow1/slide2.jpg" />
    </li>
    <li>
        <img alt="..." class="load-lazy" data-src="/images/slideshow1/slide3.jpg" />
    </li>
    <li>
        <img alt="..." class="load-lazy" data-src="/images/slideshow1/slide4.jpg" />
    </li>
    <li>
        <img alt="..." class="load-lazy" data-src="/images/slideshow1/slide5.jpg" />
    </li>
</ul>

Doesn't work on IOS and android mobile devices

Yes it does. I had a brain fart.

Firefox "Auto-Scroll" confuses JAIL

1/
Load a page full of images that implement JAIL. Make sure you've got a good two pages or so worth of images at least.

2/
Load the page in FF3.6, and scroll to the middle or so of the page.

3/
Click the reload button.

Once the page is reloaded Firefox will attempt to be smart and auto-scroll you to the last position on the page. However, once it's scrolled - the images that SHOULD be visible are not. It appears JAIL misses these for some reason?

This is with a default call of JAIL.

Performance issue we are facing with Android

Hello Team,

We are facing some performance issue with Android.
Performance of this library into Ios devices is better than Android Devices.
Can you please suggest/guide me how we can improve performance in android devices.

@sebarmeli can you please guide us!

Thanks,
Parimal

Reloading the images causes an 'undefined' error

I'm using the jail() method to load a sensitive user-uploaded image that is supplied by a PHP script (upon proper validation of the users session).

The image tag i'm using is shown below:

<img class='lazy' src='updating.gif' data-src='getimage.php?id={$imageid}' />

Now, in order to load it I use the following code:

$(document).ready(function(){
    $('img.lazy').jail({triggerElement:'#preview',event:'scroll'});
}

Which works perfectly fine! However, I have an option on the page to change that image from color to black & white. This setting is changed in the database and is automatically picked up by the getimage.php script. So all I need to do to update the preview, is refresh the image.

In order to do that, I simply used:

$('img.lazy').jail({triggerElement:'#preview',event:'scroll'});

This fails (using Firebug) with the following message:
"NetworkError: 404 Not Found - http://localhost/undefined"

I suspect that JAIL clears the data-src element after the image is loaded. Is that expected behavior or is it a bug?

Thanks,
Floating Rock

Exception with "container" option

With code:

$("img.preload").jail({event : 'load+scroll', timeout:100, container : $("#vlscroll_new-items")});

I got expcetion:
Uncaught TypeError: Cannot read property 'handler' of undefined

This happens only with "container" options