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.
Related
I need to change the color of any image that contains a particular x coordinate. However, the code I am using now only gives me the #scrollwrapper container, and not the individual image that is at that location.
var xHome = window.innerWidth/2;
var yHome = window.innerHeight/2;
var pElement = document.elementFromPoint(xHome, yHome);
alert (pElement.className);
This gets wrapper container on the images, but not the particular image that is there. The site is coolaidhouse.com/projectcaptured
You can see the scroller there. I want to dim the images on the side of the "active," item, which is basically the image closest to the middle.
If I could get the image based on its coordinates I could do the rest. However, I can't figure out how to get the image in lieu of the container.
Here is what the end result should look like:
Your code grabs the image when run from the console. Therefore, you need to wait for the image to load before running the code.
IMG elements have an onload event you can use for this purpose.
The answer was in Rick Hitchcock's comment. Don't know how to mark a comment as an answer though. The images were in fact not loaded yet.
I have a script that examines elements and makes all the elements equal the height of the tallest element of the set. This works fine except for when images take a while to load, because by then the heights have already been set.
To overcome this I added an onload listener to the img tag and after the image has completely loaded, it resets the height of everything correctly.
Now the problem is, if there is a particularly large image, or slow connection, things still look strange while the image is downloading. Is there a way JavaScript can know the ultimate display height of the image at the BEGINNING of the download, rather than the end?
Something like this should work.
var bigImage = new Image();
bigImage.src = "path/to/image";
bigImage.onload = function() {
//create image tag with dimensions and insert into dom
console.log(bigImage.width, bigImage.height);
}
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 !
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.
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