The past two nights I have been struggling with an issue in React. I have a website that has multiple images (a header, some gallery images, some cool photos). I want the page to render in whole the moment all images are correctly loaded.
There are people that tell me to use the lifecycle hooks, but that doesn't seem to work because the render proces is faster than the time some images need to load in.
This one time I thought I managed to get it working by doing the following: Add inline styling to container div saying display none. Then add onLoad={method to trigger a display: inherit} to the container div.
But when I used a bigger image (of 15MB, just to test it out) the loading was perhaps a succes but still took time to show on the page. So it didn't work afterall. It just 'looked' like it worked cause the other image loaded faster.
Anyone has any other idea's to tackle this problem?
Best of wishes,
If you know the number of images you have on the page you can do a counter that starts from zero and put an onLoad on each image which adds one to the counter when the image is loaded...then do a condition:
{counter===numberOfImages? <Content><Content/> : null}
Related
Me and the team have been a bit stumped on this so I'm hoping someone has come across this problem before.
I have a notification div that flies in depending on some event calls. The script I have seems to be working everywhere except one application where the images won't load. Both the icon css background image and the actual loading indicator won't show if the container is dynamically appended.
If i remove the initial display:none property the images load, but once the trigger is called they don't.
Unfortunately the application is on an internal network and I can't share a link, but I've included a screen shot and a jsfiddle to the code I'm using. (which in it's self is doing exactly what it's supposed to)
http://jsfiddle.net/FSshV/7/
It's a heavy js based app with some ASP.NET 2.0 here and there and some ajax calls bouncing around but doesn't seem to be giving any errors and i haven't been able to pinpoint the problem.
I know it's a long shot and not much to go on but maybe someone hit that wall before :)
I'm curious if anyone has seen a similar problem before and can share some insight?
PS: yes I've checked if the image paths are correct, and they are ^.^
I have an HTML page with some javascript functions.
It basically does this...
I have some images with transparent backgrounds (.png), I use the z-index property to sovrappose each image to the others so that I can assemble a new image.
With some buttons you can activate the javascript that makes a substitution of some images with the other.
Maybe an example will help you to understand the situation better:
Imagine a car. You have three images: glasses, wheels and body.
Each image has a transparent background so that if you see all the images together you can see the whole car.
With a button you can substitute the wheels image with another wheels image so that you can see more "versions" of the same car without creating an image for every combination (i have 345 possible combinations so this is the only way).
It works very well but it's slow :(
When I have to change only one piece, the substitution happens immediately, but when I have to change many pieces with only one click, it loads the images slowly so that it's a horrible effect.
What I need is a loading bar/wheel that appears over every other image and that disappears when the browser finishes loading the composite image.
I tried to search the web for a solution, but I only find solutions for loading the whole page. But in my case, the page doesn't change, only the inner images change.
How can I resolve this problem?
Thanks in advance,
marco
I am building a splash page for a website with jquery animations.
My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.
Ok, heres what I did:
the container div has the following css: background:url(images/colorcity.png)
if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect.
to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')
What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.
I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.
Thank you ahead of time for any help.
The page: http://roughgiraffed.com/barrandbarrbags/
Try including this at or near the top of your page:
<img src="images/greycity.png" style="display: none;" />
That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.
Very cool page, by the way (and it seems to work great in firefox).
I have a layered div component which displays a successive series of large kb images by slide-animating away the top image to reveal the next image below. I'm trying to understand how best to approach this.
Approach 1:
layer a number of divs on top of each other, each with an image assigned as background, and slide away the divs as needed.
Will the hidden divs load their images on page load, or only when they are revealed? Is this browser/client specific behavior? Do all images (jpegs, pngs) behave the same way in this regard?
Approach 2:
Use only two divs- One that handles sliding, the other that will load and reveal the next image.
In this case, is it possible to pre-load the next image, so that the javascript isn't slowed down when the next image is revealed?
Thanks- and if anyone has other ideas, I'd love to hear them.
Your first approach, even if the images are 'hidden' via CSS, will load all images by all browsers via HTTP requests. Your second approach or some variant of it is probably better.
I'd recommend using AJAX to pull down each image as you go. It's definitely possible to preload the images.
You may want to consider existing slideshow/lightbox type of plugins for jquery or javascript. It's been done so many times you will sort of be recreating the wheel (unless it's more of a learning experience thing)..
Here's an interesting example of preloading with callbacks to alert you when it's ready. Maybe a good one to adapt?
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
The first approach certainly degrades better. It will leave the images available and visible if viewed on a CSS-challenged browser. But that comes at the cost of having to pull down all the images from the get-go. The second approach is lighter on the initial hit, at the cost increased code complexity swapping images in/out.
You can definitely pre-load images with Javascript. just create an image object and set its source to whatever you want, which will automatically trigger downloading of the image. It doesn't have to be inserted into the DOM or visible to the user to do this.
Hidden divs SHOULD load their content automatically, whether they're visible or not. I can't think of any PC-based browsers that wouldn't do this, but I'd hazard a guess that some browsers intended for resource-limited devices (cell phones for one) might optimize things and delay loading contents until the container's made visible, to save on network traffic.
I need to prioritize the downloading of (in my case) images.
To do this I would prefer to use some kind of plugin (preferably for jQuery) that lets me do this without having to build my own downloadqueue mechanism.
Consider this scenario:
You have a web page.
Your web page is able to show a given user three images.
These images are only shown one at a time at the users request.
You would then ideally want to load the images from top to bottom until the user makes a selection. You would then want his selection to move up the queue and become next in line (with every selection he makes).
Of course in a page with only three images this isn't really a problem, but with more and more images it becomes important.
I am currently only using background-image to show images and would like to keep it that way.
Oh, and also, I would like a "spinner.gif" to show while an image is loading.
Any suggestions?
Thanks.
UPDATE
I ended up making my own queueing system based on this: http://jqueryfordesigners.com/image-loading/
Assuming the actual page will have a lot more than three images, take a look at this image Lazy Load Plugin . It's based around what is and what is not below the fold, works sequentially through the images, and can be configured to preload in X ones below the fold as you are scrolling. It allows for a placeholder image but might need some rewriting if you want it to expose background images rather than working on actual img tags.
Here's an example of loading 'on-demand' or when scrolled into view. Though not directly answering your question but is fundamentally similar.
http://www.webresourcesdepot.com/dnspinger/
Try scrolling down and the page gets loaded with my content. Will work for images as well.
The resource for this demo can be found at "Load Content While Scrolling With jQuery".