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
Related
please is there any js framework or code that will let me resize an uploaded logo inside an picture,
like this example on picture
A :image to resize
B : tool to use
Thanks
i cane't upload image
the link below at vk
https://vk.com/id181761990?z=photo181761990_456239019%2Fphotos181761990
You can use jQueryUI to create the slider for 1-100% size, and on slider change value, resize the image pointing at it with an unique id.
I'd use an empty div with two backgrounds (shirt and image on it) to easily keep the image always in the middle of the shirt without using text aligns and calculated values.
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'm wondering if it's possible to apply a loader image to only a specific part of content on a webpage?
All the tutorials I've seen for loader images are for entire webpages - what I would like to accomplish is to apply a simple loader only to a div.
I'm building a website that has 2 profile images for staff members layered on top of one another, so when you hover over the image, it fades to the image at the back. I used this method because we want the smooth transition when hovering.
The only problem is that when you open the page with a slower internet speed, you see the bottom / back image until the top one loads, which is not what we want. You should only see the bottom image when you hover over the profile image.
Any ideas how I can create a loader image for only this part of the content?
Here's one of the pages on the development server: http://hanrickcurran.azurewebsites.net/tony-hunt/
Thank you for the info DeeMac. I didn't even think of doing it the way you mention with hiding the bottom image until it is hovered.
I've changed the code, so now the content in the bottom / back is set to 'visibility:hidden;' and only 'visibility:visible;' when the area is hovered.
What is the best practice to use when swapping an image on a webpage? Altering the image source or just showing/hiding multiple images on the page?
you have to choose in order to balance speed, with your two options:
Altering the image source
this way, the page will load faster because it only gets the visible images but it will take a little longer to show the new image when you change src attribute
just showing/hiding multiple images
this way, you are loading all the images on page load which will make it slower on loading and faster on swapping the images
At the load time, multiple images will slow down the webpage, but at the execution time, I think it will be fastest to show/hide the images
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/