About Preload_all and show while loading

Page: 1

Author Post
Member
Registered: Jul 2011
Posts: 43
This is a short question about this two features.

The preload all does not seem to be working with my website, a month ago I was using a direct URL approach with the "thumbnails" that since to worked very good, since the user was forced to load all the big images to show them in thumbnail view, there was no resize-image of each thumbnail, that made floatbox very fast, but, on the contrary, made web browsing on tablets and mobile phones very slow, since you were actually seeing the big image scaled down with CSS.

Now that i have resizes of each image, I get stuck in the spinning cube each time I click on an image, preaload_all seems to active but it doesn't seem to be working, a typical url for my website looks like this.

<a href="image.jpg"><img src="image-583x233.jpg"></a>

I put a:"


<div class="alt floatbox" data-fb-options="autoTypes:image|media XA:image|media">
<?php the_content ?>
</div>

on the single.php loop to assign the floatbox category to all images.


Well, the full images does not seem to enter on the preload since I always get the spinning cube.



The second question is:

Is there a way to "show" the actual image loading when I click on the image and floatbox opens up? Instead of the spining cube.


Thank you in advance!
Member
Registered: Jul 2011
Posts: 43
Take a look at this link.

Images doesn't appear to be pre-loading at all.


http://hardware.tecnogaming.com/2012/07/tecnofields-2012/
Administrator
Registered: Aug 2008
Posts: 3382
I can't figure out what's going on with that page. Everything is well-behaved (including preloading) under Chrome and IE9, but nothing is working under Firefox. There are some errors being thrown on Firefox by the google api scripts; I don't know if these are interfering with Floatbox or not. Twice I saw errors thrown by Floatbox on the page ("y is undefined"), but this is not consistent and repeatable (and again, only under Firefox).

Do me a favour Alex. Could you please download and install the latest/greatest Floatbox (http://floatboxjs.com/download) and see if that fixes the problem. My strong bet is that it will. My apologies for not being able to zero in on the cause of the trouble with your currently installed version.
Member
Registered: Jul 2011
Posts: 43
Will do right away, sorry about that, it's that this site wasn't touch on the plugin side becasue I was developing other sites.
Member
Registered: Jul 2011
Posts: 43
There you go, latest floatbox 5.34 installed, could you please check if it's working?
Member
Registered: Jul 2011
Posts: 43
About the "show the image while loading" inside floatbox, is there a way to actually show the floatbox windows even when the image is still loading ?, i mean, that the user actually see the image loading.
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for updating the code.

I think we are chasing different problems. You said that image preloading was not working. I'm not sure why you think this, but the preloading is working fine and doing its thing, both under the current version and the previous version that was installed.

While investigating your page I found a problem of Floatbox just not working at all in Firefox. This appeared to be possibly related to problems in the Google API code that was throwing errors and disrupting things. I've been slicing and dicing this problem and have found that it only occurs when Firebug is active. Without Firebug, your page works fine (including image preloading) under Firefox and all other browsers. Hence there is not a real problem here to pursue.


As to your second question...
Sorry, Floatbox cannot display a partial image as it comes in over the network. The image must be fully fetched before it can be displayed.
Member
Registered: Jul 2011
Posts: 43
Ohh, thank you very much for your time.

I thought that preloading was not working because it takes a lot of time to actually I am able to see the pictures, could it be that preloading starts "after" the facebook comments loads?

I tell you this becasue my connection is slow, 1mbit at most and with this kind of speed I am seeing a big delay trying to fetch an imagen when I click on it.

Previously this wasn't a problem since the images displayed were actually the real images, so once they loaded floatbox opened them instantly.
Administrator
Registered: Aug 2008
Posts: 3382
Looking again, I am seeing something odd with the preloads on your page. The preloading is occurring, but it is not starting until after the first image is opened in a floatbox. I don't understand how this can be so. It's the same Floatbox code that's running on my demo page and there preloading begins with the page load, as it should.

I'll dig a bit into this tomorrow. In the meantime, could you do me the favour of tidying up your options.js file. The boolean values true and false are not strings and should not be quoted. Please remove all the quotes from around your 'true' and 'false' values. It may be the case that having preloadAll: 'true' where you should have preloadAll: true is messing things up.
Member
Registered: Jul 2011
Posts: 43
Sorry about that, will fix it right away
Member
Registered: Jul 2011
Posts: 43
OK, all boolean values are now without quotes.
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for the adjustment.

The problem with preloading not starting on page load is caused by a bug associated with the setting of the shadowType option to 'none' in your options.js file. It is the preloading of the drop shadow images that kicks off the preload chain, and that does not happen when there are no drop shadows.

I will of course fix this in the next release. In the current version, you can trick it by preloading something (anything) after the floatbox.js file is loaded. Insert a script element similar to the following:
<script>fb.preload("blank.gif", null, true);</script>
Member
Registered: Jul 2011
Posts: 43
Oh, I see, or I can put the shadows back in and preload will work, right?

I turned everything off since the website es responsive and should open pretty fast on portable and mobile devices.

Alex
Administrator
Registered: Aug 2008
Posts: 3382
Yes, if you remove the shadowType:'none' setting, image preloading will begin at page load time.
Member
Registered: Jul 2011
Posts: 43
Preloading is now working with your 'trick'.

Will try enabling shadows to see if it has any performance problem on slow mobile devices.
Member
Registered: Jul 2011
Posts: 43
Just so you know, I completely removed Facebook Comments and Facebook Activity from my website and the preload improved 10-fold.

DiSQUS does not seem to be so intrusive or bandwidth dependant on slow connections and pics start to get preloaded a lot sooner and faster.

Page: 1