I want to change an image when a checkbox is clicked. Until the new image is fully loaded a loader image should appear on top of the current image. While loading the opacity of the current image should also change to 0.5.
The function should therefore consist of the following steps:
On checkbox click:
Change img src
While loading:
Set opacity of current image to 0.5
Display loader.gif
When new image is loaded:
Change opacity back to 1.0
Hide loader.gif
Display new image
How can this be done with jQuery?
Thanks in advance for all proposals!
The steps should actually be
on checkbox click, start to preload the new image
Start by creating an Image object, and then setting its load property to a function that will be called once the image has been completely loaded. Then (after setting the load property) set the src attribute of the Image object we created to the Url of your image.
while waiting, set the opacity, show the loader
Opacity you can control with the css property opacity. You should have the loader already in the page but hidden, and just show it while the preloading is in progress..
when preload is complete hide preloader, show image reset opacity
The function we defined for the load attribute gets called and inside the handler we reset the opacity, hide the preloader and set the src of our element in the page to the src of the Image object we created..
here is a full example: http://www.jsfiddle.net/kqC9U/
Well, lets take a quick moment and dissect the problem:
If your changing the image source (which can be done almost instantly) why do you need a loader gif? In fact, displaying the loader gif takes as long as displaying the new image. If you'd like the loader gif for dramatic appeal you can display the loader.gif, wait 5 seconds, then change to the new image.
Changing the image can easily be accomplished by changing the src attribute on a current image. For instance,
$.('#myCheckboxID').change(function()
{
$.('#myPictureID').attr('src', "path/to/new/image/");
});
Let me know if you decide you need that loader gif for dramatic effect and I'll help you wire it up
edit:
Because the loading effect is desired, try something like this. I'll pencil down some psuedocode, let me know if its not specific enough.
Change the source on your first picture
Hide the first picture for x seconds (get a feel for how long it takes to load)
Unhide a loading gif of the same size with opacity already set
hide the loading gif and unhide the first picture
Related
Using a div with
<div ng-style="{'background-image':'url('+image+')'}"></div>
I would like to show a spinner in the div while the background image has not yet been fully loaded. How is that possible? I want to use the background-image for displaying the image (and not the src) since I want to crop and center my images.
Set a 'loading' variable on your scope to true when loading and then false when loaded.
Use ng-class in the template to set the class with the background image when 'loading' e.g. ng-class="{'loading-class': loading} "
Use onloadeddata event Angular on video load event
I have 60 images. I want to display one image at a time and when the user pans it will display the next or the previous one depending on the pan's direction.
Simple example to explain my thought :
http://jquery.vostrel.cz/reel#demo
For now I load and append all my images to the DOM (img html tag... maybe as css background-image is better in my case) and I swap between them with the visibility attribute : hidden / visible.
It's working fine.
Second option : Same as before but I play with the z-index to put the desired image to the foreground.
Third option : just one image and I swap the src attribute.
EDIT 1 : images are intended to be displayed fullscreen and are 720p.
EDIT 2 : Loading the 60 images at the beginning is not really an issue... if I want more images I will load them as I need them.
I would place all images, positioned absolute in a container. Each image with a z-index of 1, except the first has the class top. The top class has z-index: 2.
In jQuery, when you click the img with class top it removes the class, finds the next element and adds the top class to that, each click making the next image visible.
Swapping the src or background image is going to require further loading on each click. Load everything, display accordingly with z-index.
Maybe the first option is the better one. But regarding performance issues, instead of loading every images at once, load only the first ones. On pan event load the next image bundle and so on.
Why you shouln't use the method with visibility, display, visibility or z-index: it would slow down the loading of your page, because 60 images would be loaded at the same time.
I tried the following, and it worked for clicking, although just in one direction (you can also add the buttons "back" an "forward"):
<img id="img" onmouseup="toggle()" scr="1.png" style="border-style:solid;padding:3px;border-width:1px;" />
javascript:
var i = 1;
function toggle() {
i++;
if(i==61) i = 1;
document.getElementById('img').src = i+".png";
}
Now you just have to put the images called "1.png, 2.png, 3.png, ... , 60.png" to the folder.
Z-index is much more slower than visibility.
If you want to browse a stack of images (hundreds of 720p images) go for the hidden/visible.
I would be interested to know why tough !
Inside a page I am having a TR on which when user click it change it's color to blue and arrow color to white. This is achieved by changing elements' class dynamically.
But due to this what happen is, when user click on TR user saw image loading delay. How to preload that CSS image.
this.className = this.className + " active";
CSS
.table td.arrow div {background-image:url("../stuff/arrow.png");}
tr.active td.arrow div { background-image:
url("../stuff/arrow_active.png"); }
Update
One more thing want to update that static content is getting loaded from other server.
The browser only loads images from the CSS that are shown. So you could place your arrow_active image in a element, that is visible but has no opacity.
But i would suggest you use sprites: Less HTTP requests + no preloading problems: css-tricks.com/css-sprites , alistapart.com/articles/sprites
You could solve your problem like this with pure CSS.
http://jsfiddle.net/Q6dTf/
Alternatively you could use a :before pseudo element if you dont want to add a new HTML element.
As #meo said you are probably better off using sprites, but in case you want to preload images you can just create a dummy Image instance that loads the image into the browser's cache.
Like:
var preload = new Image();
preload.src = '../stuff/arrow_active.png'; //triggers the download
In case you want to wait for the preloading to wait for the page to build you can listen for the load event that the preload will fire when it has finished loading the file (be careful as this is complicated terrain).
image preloading code snippet :
myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
jquery code to display preloaded images:
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
I used image preloading so that the first image in my slider does not take time to show up, but it does with a blank space instead and all the consequent images show up without showing any blank space. But I don't know how to fadeIn the images during display.
the following code
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn('slow');
shows an error in console:
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn is not a function
I want a slider the one in http://www.cisco.com/
1) what should be the steps so that no blank space shows up at the very first time the slider begins? Putting code inside $(document).ready(.. or not does nothing.
2) how to achieve the fadeIn effect?
3) In http://www.cisco.com/, for each image, the text on the image seems to be highlighted a bit after the rest part of the image. How to achieve that?
EDIT:
after the image preloading snippet, the next segment follows:
for (i=0; i<n; i++){
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
if(i==n-1){
i=0;
}
}
that is all about the part of the slideshow I am interested to discuss here.
You don't want to be calling .html() on an img tag. You want to be setting the .src attribute on the img tag to point it to a new image. Assuming that .vrpl_slider_img is initially not visible, you would use this:
preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
// then some time later after the preload images have loaded
$(".vrpl_slider_img").attr("src", "img/1.jpg").fadeIn(40000);
You do not need to use the preload images at all once they've been loaded. The point of the preload images it to cause the images to get loaded into the browser cache so they are available locally (rather than over the internet) and will thus be loaded immediately when requested in the future. So, you just use the .src attribute with the normal image path and, because the image is in the browser cache, it will load immediately.
I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.
Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.
All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).
Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide() my entire body while the background image loads.
*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded? *
* EDIT 2 *
Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?
<script>
$(function() {
// create a dummy image
var img = new Image();
// give it a single load handler
$(img).one('load',function() {
$('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
});
// declare background image source
img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";
// make sure if fires in case it was cached
if( img.complete )
$(img).load();
});
</script>
This seems an old thread but I found a solution for this.
Hope it can help:
$(window).load(function(){
$('<img/>').attr('src', 'images/imgsrc.png').load(function() {
$('#loading').fadeOut(500);
$('#wrapper').fadeIn(200);
});
});
Use $(document).load() to achieve what you want.
"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"
It is, just before the page has loaded
Add display: none; to your body tag
<body style="display: none">
Then with jQuery modify your code so it looks like this:
$(img).load(function(){
$("body").show();
});
Now page content will only show after img loading is complete.
To check when the image is loaded, declare another, "regular" image (i.e. the <img> tag) with the same src and attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.
Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.