GIF. loading before the page - html

Okay! So when a person click on the link that leads to the other page I want that the GIF. shows first for atleast 4 seconds and then the page. I dont want the GIF. loading when the page loads. Just... the gif. shows first then the page after 4 sec. I couldn't find a code anywhere about this part. Only about a gif loading before the page loads completely. I just want the gif first and only on the page showing then the page shows itself.
I tried many codes given on this site but this ain't it chief.

Related

not getting proper image in React JS

I have a problem with my reaction time.
If I open my product page for the first time, everything is OK except the photo.Not working image
As you can see in the image,
But if I refresh the page, it works perfectly fine. working image
my product page component

fancy box and grid display issues. Pictures overlapping

Can someone look at the image below and let me know what I seem to be doing wrong? On the first load, pictures show up like this but then if I refresh, then it resolves itself.
If I comment out the script, then everything shows up ok. If I add the script back in then it produces the result in the picture on the first load everytime
The answer to this is that there are about 3 images (full size) that are not loading. The reason is the capital .JPG and Chrome. Fixing the file name extenstions to .jpg will correct the issue as the image will load and the fancybox can do it's calculations to get the right heights.

HTML5 prerender/prefetch not working (I get a progressive curtain-like downloading/transition !)

I'm working on a web project and I want to load my webpages with an even transition. What I get right now is my photos and background downloading in a curtain-like manner. I want it to show up when it is all loaded instantly.
I don't mind if there is a progress bar or something but not the curtain-like manner.
I used the prefetch/prerender html 5 tag but with no success..
visit here :
http://hellenic-jewls.com/
and then try to hover to another webpage to see that my images are downloaded progressively like a curtain :
e.g. http://hellenic-jewls.com/classical/
ofcourse when the webpages are cached it's ok.
HTML5 prerender/prefetch doesn't work that way. You use them to hint to the browser that you think that page will be visited next and should therefore be prerendered. There is no guarantee that this will happen though... it's up to the browser to decide if it wants to prerender the page.
Further, there will only be one page prerendered at any one time.
What you can do is hide your images, then use a script like https://github.com/desandro/imagesloaded to signal when the images are loaded, at which point you can show the images (with a fade-in transition if desired)

How to move to the page from a frameset?

in my website, I have a page which have 3 frames, lets say left_frame, top_frame and bottom_frame.
In top_frame, i have a link Click. Currently, this some_page.php is loaded inside the top_frame but i want to completely load a new page. Is there any way out?
This should do the trick.
Click

How to ensure all images load correctly

In my HTML page I load about 40 images from the same domain (on page start up, all images load at same time). The problem is, sometimes some images don't show up, they're just a white box with a red X on the top left side. But if I try to refresh the page once (or a few times), that image then loads fine.
Does anyone know why this happens and how to ensure all images load fine?
This happens because the images aren't finished loading in time. You could try pre-loading them with javascript
What I would do is make sure the images are small (using thumbnails) so they will load. Then, load only a few at a time and load more as the page is scrolled or whenever the user requests more images.
See google images or pinterest for an example of how it would work. As you scroll the page, more images are loaded, as opposed to loading them all at once.