is there any possibility how to load an image with jQuery in background and than animate the transition? I have a gallery of big fullscreen images as a background for my website. I have paths of all images in some hidden elements, at first I make the background div bit transparent, than I change the background-image property with jQuery and at last I make it again visible..But there is a bit long time before the image is loaded. I dont want to show any loader or something else..I only want to load the image in background and than male the transition..Is it possible? Thanks
did you try jquery image load
http://api.jquery.com/load-event/
Related
I have a hero section in a website that has a background image with 2 images that overlay. These two images slide back to the sides like a curtain. My problem is the background image loads before the two overlay images. Is there any way I can force these 3 images to load in a set order?
TIA
I don't think you can do this through pure HTML/CSS, but you can omit src attributes in your HTML and add them in with Javascript in whatever order you want when the page loads.
Check out this answer for more details. To set the background image you'll have to set the 'background-image' CSS property instead of setting the src attribute: Controlling image load order in HTML
i am trying to make a slider here in javascript and what am i trying to do is i am trying to have a single div and use the background image as the image placeholder which has the background size and cover property.
And i am trying to use navigation keys for loading previous and next images.
Now the problem is that how can i preload some images and use then as in Bg property so that when i click the next arrow, the images do not have to wait for the next image as background for the div to load. Thanks.
I have found a similar problem in this link:
Preloading CSS Images
I am using CSS & jQuery Preloader in my website for showing preloading image untill my complete website is not downloaded.
http://www.entheosweb.com/tutorials/css/preloader/default.asp (I am using this Example).
Now I am using a Gif Image until my Complete Website is not Downloaded. Can anybody Help me to
show loading in percentage instead of gif image.
thanks in advance
Try a HTML5 and jquery preloader... Its a good jquery plugin for your requirement...
http://gianlucaguarini.com/canvas-experiments/jQuery-html5Loader/
One of the possible ways is to load parts of your website asynchronously. E.g. if you need to load some text and image, first thing you need to do is to specify how many percents should this resource take:
text - 15%
image - 85%
Then after loading text you can animate width of progress bar to 15%, and trigger loading of image. After loading image you can animate width of progress bar to 100% and show whole content.
Image load event here.
Asynchronous loading of text content here (using ajax).
I am aware that using CSS sprites is the way to go when you use images for both states, but what about when you have text as the unhovered state & an image on hover?
There a few ways I can think of, but wondering which method is the best in peoples opinions?
I can think of doing it via JavaScript or loading it via a hidden CSS element.
Are you using CSS Sprites for other relevant images on your website?
If not, then you should do it.
Have your "other relevant images" and "menu images" in the same sprite image.
Even if it's just for one other image, it will mean your :hover menu images are automatically preloaded.
You can use the same sprite, just set the sprite to a transparent section, or background-position out of the button, and when in hover, set it to the right place and text-indent the text, if the button image has the text on it.
Most browsers won't preload hidden images.
How would you fade in a background image (the body tag, and it is tiled) with jQuery? The background color is white and in a callback function I want to toggle the background image to on and off.
Any ideas?
Using jQuery for Background Image Animations
Unfortunately you can't really fade in a tiled background image. Since the image is part of the CSS rendering system it doesn't have a node in the DOM.
You can do some fancy stuff by using a frame type animation by moving the position of the background image but this wouldn't work with:
A. a whole body background
B. a tiled image.