Problem with slider images loading time and display - css

I have a problem with the sliders on my website (I just started coding recently).
http://www.willybass.com
Depending on the browser and the connexion, the images sometime do not load and the slider displays completely flat (then it only display correctly if you hit refresh, or sometimes it loads and displays, again depending on the browsers and connexion).
Does anyone know what is the best solution to this issue ? (to at least display a grey background with the dimension of picture that didnt load, while it loads)

Related

Revolution Slider Carousel loads tiny

I implemented a rev slider in my wordpress site and im not very impressed.
The first carousel slider loads okay on page load but the next batch of carousel sliders seems to take ages before it assumes the actual size. Here is a snapshot to explain better.
This is the first carousel slider on the tab and displays by default on page load which looks great.
This second one on the secon tab just doesnt load quite right and will last forever in this size unless i refrest the page many times. Not cool at all.
I have the feeling i missed some configuration but cant seem to get any help throug google searches and will appreciate all the help i can get.
Thaks.
This is not a configuration issue but script conflict issue happening because sliders are in tabs so initially first tab content is visible while others are hidden so technically content of 2nd tab has 0 height. And since slider calculates the space it is going to occupy dynamically, it gets smaller height as tab scripts are loaded a bit after slider scripts are. Try contacting ThemePunch support and ask them for redraw code which will redraw slider using slider API forcing slider to force reload upon page load, resulting in loading slider properly the first time.

Image size shifts when page loads

I have a ghost-in-the-machine it seems: I have put a thumbnail with a rollover stage on a Wordpress site I'm working on. It works fine except that it does this strange resizing when the page loads. A small but very annoying thing.
This is the page
I've also added the same code to another Wordpress site I am working on, which is based on the same theme (Quark). It doesn't happen on the other site.
How do I resolve this?
You are using percentages to define the widths of the containers and images, which is fine. However, upon initial page load, not all of your elements are available yet, so the relative percentages gradually reach their end-point when the document finishes loading. Doesn't look like like it's doing too much on my screen but in order to get around this you can load the images via jquery and set it to $(document).ready which will wait until the page is done loading, to even load the iamges.

Having some IE8 specific loading issues on my page / Hanging at blank screen with "n items remaining" in status bar

So, I'm working on a new e-commerce site for my employer, and I've noticed that it displays / functions properly in every browser but IE8 (Which is rather inconveniencing, as about 80% of the office uses IE8.)
The site in question can be found here . When i load the page ( And more specifically, when I refresh a page ) I will sometimes have it saying "(2 items remaining) Waiting for..." and then it just hangs at a blank screen, until I type in a different URL or navigate to a different page.
Can somebody please offer me some insight as to why this might be happening, and what kind of things I can do to regulate it.
I used BrowserStack to test this and I didn't have a problem at all. This could very well be a JavaScript issue.
Try minimizing & concatenating your JS & CSS files. You can also create image sprites instead of loading lots of small images. After all that IE will have less files to download and they'll all be smaller so that should help.
Also, I see you're using WordPress which is a little harder to set up by try loading your JS at the bottom of the page. That way IE doesn't get hung up on a JS file at the top.

Saving thumb nail preview with JCrop, JQuery and asp.net

I've been dabbling with JCrop and I can get it working so far as uploading an image, selecting a region and then saving what I've selected to a cropped version of the original image. I can also get the thumbnail preview working, so that whatever I've selected (however big or small fits into a 150px*150px region)..so far all good.
The only problem I'm having now is saving what is in the thumbnail preview which is 150*150 and as mentioned contains whatever I have selected...
I've had a good look around on google and can't see anything to save the thumbmail preview..
Anyone come across this before?
Ok bascially what I'm doing is saving the cropped image and then saving it again but resizing it to whatever dimensions are in the preview pane....I'm not sure it gives me the an exact replica of what's in the preview pane in terms of quality but it's not so bad I guess.

Web page behaves strangely

Have a look at the following site http://www.soe.gr.
The whole page has been built with CSS Page Builder Magic 2 (projectseven.com).
Every button is a link to a different .html page.
However, I do not know why every button press creates a flash effect in the page, the background changes instantly color and generally it gives an impression of abnormal operation. I have not met any site with such behavior except some pages inside projectseven site.
Do you have any idea why that happens? Is it something wrong with Page Builder Magic approach?
I am new to Web Development world and I want to know if there is any problem with these guys.
Thank you very much
I checked it out, it doesn't behave abnormally at all for all those effects you have there, I checked out the size of one of the images it is about 250kb, then imagine the other images which I assume are of the same size, and they are all going to be loaded when the page loads, you definitely should expect some effect

Resources