jQuery dynamic image loading
15,522
You should go ahead and cache the image (pre-load it into a variable) so that you can access it quickly. You also might want to make use of jQuery's load() function to tell you when the image has been loaded. Here's a quick example:
var theCachedImage = new Image();
/* Boolean that tells us whether or not the image has finished loading. */
var theBoolean;
$(theCachedImage).load(function () {
In this callback, the image has finished loading.Set "theBoolean"
to true.
theBoolean = true;
});
theCachedImage.src = "your/image/source";
Like Kevin mentioned, the fadeIn is working. There's just nothing to fade in.
EDIT:
In your keyUp
function, simply check the value of the conditional boolean and perform actions accordingly. Example:
$('#id').keyup(function () {
if (theBoolean) {
$('#img').html('<img src="http://www.site.com/' + $(this).val() + '.jpg"
width="200px">');
$('#img').hide().fadeIn('slow');
} else {
/* Your image hasn't been loaded yet. Do something to let the user know
* or figure out the appropriate action to take. */
}
});
Author by
Admin
Updated on June 04, 2022Comments
-
Admin almost 2 years
**I try to load an image when I type a reference in an input.
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { $('#id').focus(); $('#id').keyup(function () { $('#img').html('<img src="http://www.site.com/' + $(this).val() + '.jpg" width="200px">'); $('#img').hide().fadeIn('slow'); }); }); </script> </head> <body> <input type="text" size="7" maxlength="7" id="id"> <div id="img"></div> </body> </html>
The fadeIn() doesn't work, except if the image is already in cache. How can I have a fadeIn each time? Thanx in advance.
EDIT
Another script, it works!
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { $('#id').focus(); $('#id').keyup(function () { $('#img').attr('src', 'http://www.site.com/' + $(this).val() + '.jpg'); $('#img').hide(); }); $('#img').load(function () { $('#img').fadeIn('slow'); }); }); </script> </head> <body> <input type="text" size="7" maxlength="7" id="id"> <br> <img id="img" width="200px"> </body> </html>
-
Admin over 10 yearsThanx, but I don't know how to use the load() function with the keyup() one.
-
Admin over 10 yearsThanx for your efforts, I updated my script and it works now!
-
gowri over 10 yearsCan i load images dynamically, with huge no.of images. Like i have 200 images, and i have to show images on slide show, can i load images in a set of 10 images per set???
-
Don over 10 yearsHmmm... it really depends on what you're trying to do. If you create a new question and provide some more details on what exactly you're trying to do, I'd be happy to help you out. Just post a link here so that I know that you created it.