jQuery 'Galleria' randomon stops loading

Question

The problem revolves around a jQuery gallery called 'Galleria'. It's quite aesthetically pleasing and since my client is a Photographer, I thought I'd display all of his images in a Galleria gallery.

You can see the site, in it's testing version, here: http://jeremywebbphotography.com/testing/index.php - (if things are changing, that's because I'm working on it right now).

Basically, the problem is: if you browse to any of the gallery pages they appear to work fine. Hooray! Except that, after looking at any sort of random number of them, after a while the images stop loading and appearing. The thumbnails will appear, but if you click any of them the image will appear briefly then suddenly disappear. I've worked countless hours on this site and only now do I discover the flippin' problem.

It's not going to be easy for me to integrate a new gallery solution since this one has been set up by me with a very specific structure that did take me hours and hours to do.

So far I have only found the problem in Safari, but I believe it may also happen in other browsers. The problem can be fixed by restarting the browser, but obviously when providing a professional service to my client this clearly isn't good enough for him or the users. The thing is, I know of no way to trigger the error - it just seems to happen randomly.

I need some serious help. I don't have the time or patience to redesign this all over again with a new gallery.

I'm using jQuery's supplied code. Also, Galleria provides this code in jquery.galleria.js - If you can make any blooming sense out of it... I guess it's sort of pointless posting this, but hey...

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){4 q;q=$.23.7=5(k){6(!q.1o()){Q J}$.1p(q.1b);4 l={Z:\'.1q\',K:E,10:E,1c:5(a,b,c){},1r:5(a){}};4 m=$.11(l,k);1d(4 i 24 m){6(i){$.7[i]=m[i]}}4 n=($(m.Z).R(m.Z))?$(m.Z):3(B.12(\'1e\')).25(8);4 o=$(B.12(\'1e\')).u(\'1s\');4 p=$(B.12(\'1f\')).u(\'1g\');n.u(\'1q\').13(o).13(p);Q 8.1t(5(){$(8).u(\'7\');$(8).1u(\'L\').1t(5(i){4 b=$(8);4 c=$.26?$.11({},m,b.27()):m;c.10=$(8).R(\':28-S\')?J:c.10;4 d=$(8).T(\'a\').R(\'a\')?$(8).T(\'a\'):J;4 e=$(8).1u(\'F\').C(\'M\',\'U\');4 f=d?d.9(\'1v\'):e.9(\'1h\');4 g=d?d.9(\'14\'):e.9(\'14\');4 j=1w 1x();6(c.K&&(N.r.t&&N.r.t.V(/\\#/,\'\')==f)){b.G(\'.D\').W(\'D\');b.u(\'D\')}$(j).29(5(){$(8).9(\'1y\',e.9(\'1y\'));4 a=d?d.T(\'F\').u(\'1z 1A\').C(\'M\',\'U\'):e.2a(E).u(\'1z\').C(\'M\',\'U\');6(d){d.2b(a)}6(!a.1B(\'1A\')){4 w=1i.1C(e.v()/e.y()*b.y());4 h=1i.1C(e.y()/e.v()*b.v());6(w<h){a.C({y:\'1D\',v:b.v(),1E:-(h-b.y())/2})}s{a.C({v:\'1D\',y:b.y(),1F:-(w-b.v())/2})}}s{N.1G(5(){a.C({1F:-(a.v()-b.v())/2,1E:-(a.y()-b.y())/2})},1)}a.9(\'O\',f);a.9(\'14\',g);a.1H(5(){$.7.X(f)});a.P(5(){$(8).u(\'P\')},5(){$(8).W(\'P\')});b.P(5(){b.u(\'P\')},5(){b.W(\'P\')});b.1I(a);a.C(\'M\',\'2c\');c.1r(3(a));6(b.1B(\'D\')){$.7.X(f)}e.1J()}).1K(5(){b.2d(\'<1f 2e="1K" 1L="2f:2g">2h 2i 2j: \'+f+\'</1f>\')}).9(\'1h\',f)})})};q.1M=5(a){Q $(a).R(\':1N-S\')?$(a).G(\':1O-S\'):$(a).1j()};q.1P=5(a){Q $(a).R(\':1O-S\')?$(a).G(\':1N-S\'):$(a).1Q()};q.1o=5(){$(\'1R\').13($(B.12(\'1e\')).9(\'1S\',\'1k\').C({v:\'1T\',y:\'1T\',M:\'U\'}));4 a=($(\'#1k\').v()!=1)?J:E;$(\'#1k\').1J();Q a};q.1b=5(a){4 b=$(\'.1s\');4 c=$(\'.7 F[O="\'+a+\'"]\');6(a){6($.7.K){N.r=N.r.1v.V(/\\#.*/,\'\')+\'#\'+a}c.15(\'L\').G(\'.D\').W(\'D\');c.15(\'L\').u(\'D\');4 d=$(1w 1x()).9(\'1h\',a).u(\'2k\');b.1U().13(d);b.G(\'.1g\').2l(c.9(\'14\'));$.7.1c(d,b.G(\'.1g\'),c);6($.7.10){d.C(\'2m\',\'2n\').1H(5(){$.7.1j()})}}s{b.G().2o().1U();$(\'.7 L.D\').W(\'D\')}$.7.16=a};$.11({7:{16:\'\',1c:5(){},X:5(a){6($.7.K){$.1V(a)}s{q.1b(a)}},1j:5(){4 a=$(q.1M($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)},1Q:5(){4 a=$(q.1P($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)}}})})(3);3.11({z:17,x:17,1p:5(a){3.x=a;4 b=r.t;3.z=b;6(3.H.1l){6(3.z===\'\'){3.z=\'#\'}$("1R").1I(\'<1W 1S="18" 1L="M: U;"></1W>\');4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b}s 6($.H.19){3.A=[];3.A.I=K.I;3.1a=[];3.Y=E}3.x(b.V(/^#/,\'\'));2p(3.1Z,2q)},20:5(a){3.A.21(a);3.1a.I=0;8.Y=E},1Z:5(){6(3.H.1l){4 a=$("#18")[0];4 b=a.2r||a.1m.B;4 c=b.r.t;6(c!=3.z){r.t=c;3.z=c;3.x(c.V(/^#/,\'\'))}}s 6($.H.19){6(!3.1n){4 d=K.I-3.A.I;6(d){3.Y=J;4 i;6(d<0){1d(i=0;i<1i.2s(d);i++){3.1a.2t(3.A.2u())}}s{1d(i=0;i<d;i++){3.A.21(3.1a.2v())}}4 e=3.A[3.A.I-1];6(e!==17){3.z=r.t;3.x(e)}}s 6(3.A[3.A.I-1]===17&&!3.Y){6(B.22.2w(\'#\')>=0){3.x(B.22.2x(\'#\')[1])}s{c=r.t;3.x(\'\')}3.Y=E}}}s{c=r.t;6(c!=3.z){3.z=c;3.x(c.V(/^#/,\'\'))}}},1V:5(a){4 b;6(3.H.19){b=a}s{b=\'#\'+a;r.t=b}3.z=b;6(3.H.1l){4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b;3.x(a)}s 6(3.H.19){3.1n=E;8.20(a);4 e=5(){3.1n=J};N.1G(e,2y);3.x(a);r.t=b}s{3.x(a)}}});',62,159,'|||jQuery|var|function|if|galleria|this|attr||||||||||||||||||location|else|hash|addClass|width||historyCallback|height|historyCurrentHash|historyBackStack|document|css|active|true|img|siblings|browser|length|false|history|li|display|window|rel|hover|return|is|child|find|none|replace|removeClass|activate|isFirst|insert|clickNext|extend|createElement|append|title|parents|current|undefined|jQuery_history|safari|historyForwardStack|onPageLoad|onImage|for|div|span|caption|src|Math|next|css_test|msie|contentWindow|dontCheck|hasCSS|historyInit|galleria_container|onThumb|galleria_wrapper|each|children|href|new|Image|alt|thumb|noscale|hasClass|ceil|auto|marginTop|marginLeft|setTimeout|click|prepend|remove|error|style|nextSelector|last|first|previousSelector|prev|body|id|1px|empty|historyLoad|iframe|open|close|historyCheck|historyAddHistory|push|URL|fn|in|insertBefore|meta|data|only|load|clone|replaceWith|block|html|class|color|red|Error|loading|image|replaced|text|cursor|pointer|andSelf|setInterval|100|contentDocument|abs|unshift|pop|shift|indexOf|split|200'.split('|'),0,{}))

Answer 1

I don't have Safari installed, but I can recreate the bug in Chrome somewhat consistently now, and I can see from Chrome's debugger that the reason it's failing is because it's hitting the else part of the if statement in $$.onPageLoad = function(_src) on line 283 of the unpacked source, because _src is empty. It only happens on the first load of a page (sometimes). This makes me think that the onload event isn't waiting for images to be completely ready. Google led me to a page talking about Safari's page loading, which points out that

With most browsers, they will wait until the page is loaded, all images and stylesheets and scripts have run, and the page has been displayed before they fire onload. Safari does not.

In Safari, it seems onload fires before the page has been displayed, before layout has been calculated, before any costly reflows have taken place. It fires before images have completed decoding

So, try adding a delay before invoking the galleria code on the ul, or check that the width of the first image is > 0 before invoking the code.

Answer 2

Running it through the w3c validator shows 17 errors.

It's certainly worth fixing any errors like these to get a more consistent cross browser experience.

Answer 3

I tested in chrome (WebKit) - everything seems ok here, until one time - it loads image i want to and then goes to last one (i opened gallery 2, picture 27... and then whatever image i clicked on, after 0.5s it returned back)

Plus, you have one wrong element - </br> instead of <br/> in menu.

Answer 4

You can find the full source for galleria here: jquery.galleria.js.

And for what it's worth, the gallery seems to work quite well in Firefox.