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).
Related
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}
I have a question regarding the image loading style as shown on http://www.e-flux.com. This website first loads an image of a certain pattern (randomly) before proceeding to display the actual image. My guess is that this is to have visually pleasing content before even having loaded the total website.
I have looked at the source code and I saw that it had a class of "lazy is-loading". I think it has to do something with that.
I'd like to replicate this effect and did some research, about progressive images and such. Also, this website: 'css-tricks.com the-blur-up-technique-for-loading-background-images/' explains about loading a small image first and blur it to keep loading times low until the actual image has been downloaded.
But I can't seem to find how they did this trick at http://www.e-flux.com.
All info is appreciated!
Old question but doesn't have a selected answer.
I'm working on the same thing, and something simple I'm trying is as follows:
<img style="background-image: url('MYIMAGE.svg');" src="MYIMAGE.jpg" width="500">
the .svg is a very small file and thus loads almost instantly. Then, the .jpg pops in when it's done. I literally have no other code - trying to keep it simple.
Sometimes the CSS background-image is not desired. You could also use a simple inline javascript for this purpose, a disadvantage is that the placeholder image has to load first and correctly. However, this is usually not an issue, as the placeholder image will be faster to load in the first place, and may already be in cache.
For example:
<img src="placeholder.jpg" data-src="my-image.jpg" onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');">
This works because the browser will typically leave the currently displayed image in view until the new image has loaded.
It might not be a perfect solution, but it is simple, fairly readable, and easy to implement.
Looking at their source, its done using a background-image sprite, positioned on a div element - alongside the image that's eventually loaded..:
<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div>
and
.item-image-wrapper-bg6 {
background-image: url(../elements/bg-6.gif?2);
background-size: 85px;
}
I'm having some trouble getting my wrapper's background image to preload before my nivo-slider slideshow loads. This is something my client is very picky about even though it's only a fraction of a second -_-
I've tried every jQuery and css method I've found on here and either it makes no difference or breaks the nivo-slider.
Here is a link to a test page
http://www.wheatbeakinc.com/test/
As you can see it loads fast enough for most people but like I said my client is picky about these kinds of things. Also the actual background image is larger in filesize than the test so it takes a little longer.
Can anyone offer any insight?
Thank You.
If you insert the background image as an actual image before the slider code and set it to hidden, it should at least start loading before nivo slider. (Background images load last).
E.g.
<img src="your-background-image.jpg" alt="" style="display:none" />
If that still doesn't work, you could wrap the nivo slider in window load instead of doc ready, so it only begins after all images on the page have loaded:
$(window).load(function(){
//slider code here
});
How can I make something similar to the effect below. When you scroll the scrolling isnt continuos, instead you jump to the next image down.
http://www.yesstudio.co.uk/
I image its pretty complicated JS so im very open to other solutions that achieve a similar affect.
I think you'll need to use JS. Use JQuery. Shouldn't be that complicated.
If you look at the page source, you'll see that images are loaded normally in order. All you have to do is put one
<div style='width:100%;height:100%;position:fixed;z-index:2'>
<img id='pic' src=''>
</div>
into your html, and then update src atribute depending on $(window).scrollTop(). I think JQuery has a function that tells you which elements are visible. Not sure though. Look it up.
Give it some thought.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.