Hello I have this callback function when an image is uploaded to the server and I then want to show this image as a thumbnail generated by a PHP script
'onComplete' : function(event, ID, fileObj, name,response, data) {
var newfile = '/admin/includes/image.php?filename='+name+'&maxw=150';
$('#uploaded_images').append('<li class="'+ID+'"><img src="/site_images/ajax-loader.gif"" alt="" /></li>').fadeIn('fast');
$.get(newfile, function(){
$('.'+ID).fadeOut().empty();
$("."+ID).append('<img src="'+newfile+'" alt="" />').fadeIn();
});
the ".get" jquery function is supposed to show the img tag only after the image is loaded (and it does) the problem is that when I print the img tag the image is loaded again. This practically only fadesIn the "container" of the image. The image will continue to appear only when loaded and without any effect.
Is there a way I can arrange the script to use the image cached with "get" or actually print everything only when the image is loaded directly?
Thank you
Instead of $.get(), use the .load() event of the image, like this:
$("<img />").load(function() {
var img = this;
$('.'+ID).fadeOut(function() { $(this).html(img); }).fadeIn();
}).attr("src", newfile);
What this does is when the image element we're creating finishes loading, fade out the .ID element, when the fade finishes, set the content to the <img> element (.html(elem) is a shortcut for .empty().append()), then fade it back in.
Related
I'm pretty new to jQuery, AJAX, and web dev in general, so this is driving me crazy.
I've got an AJAX request that pulls in page content into the current one, and I'm trying to coerce jQuery into displaying it like so:
Fade out current content
Smoothly resize the div to the new content
Fade in new content
So far, I've got it written up something like this. I've changed it a round a bunch, so this might not be the closest I've gotten, but the same problem still persists.
$("#page-data").fadeOut(600).html(data);
$("#page-data").ready(function() {
var newHeight = $('#' + divname).height();
$("#page-data").animate({
height: newHeight,
}, 600, function() {
$("#page-data").fadeIn(100);
});
});
Where page data's got this simple style:
#page-data { position: relative; overflow: hidden; }
My problem is that $('#' + divname).height() doesn't account for images and other things that could occur in the div. I tried using .load() instead of .ready(), but then the callback isn't called at all.
Since there isn't any HTML included in the question, I'm assuming that you have your container <div id="pageData"> that holds another <div> (identified by divname), into which you are loading your dynamic content.
Firstly, $(..).ready() can only be used used on the document object, so using applying it to a <div> goes against jQuery's documentation.
The best way I can think to acheive your goal is to keep track of any images in the HTML that you have dynamically loaded via AJAX and monitor them until they have all been loaded. Then you can apply your logic for setting the height of your container <div>.
The problem is that if we apply a load event handler to an image that has already loaded, then it won't fire. Working out whether an image has been already loaded can be tricky, but the received wisdom seems to be to check the complete property (if it exists) or check whether the the height of the image is greater than 0:
function imageLoaded(img) {
if(typeof img.complete != 'undefined') {
return img.complete;
}
else {
return(img.height > 0);
}
}
Now we can take the following steps:
Fade out the <div> (e.g. #pageContent) that will contain your AJAX
content
Load the AJAX content
Search through the new content for all
images, count how many there are, add a load event handler to each
one, then cycle through each image checking if it's already loaded
and manually firing the load event if so.
In the load event we decrement the counter. When the counter reaches zero, then calculate the height of the container <div> and fade in the content
For example (see here for a working jsfiddle):
$pageData = $('#pageData');
$pageContent = $('#pageContent');
$pageData.height($pageData.height());
$pageContent.fadeOut(function() {
$pageContent.load('http://your.dynamic.content', contentLoaded);
});
function contentLoaded() {
var $loadables = $(this).find('img');
var loadableCount = $loadables.length;
// Attach onLoad event handlers to each image
$loadables.load(function() {
loadableCount--;
checkAllLoaded(loadableCount);
});
// Trigger the onLoad events manually for any images that have already loaded
$loadables.each(function() {
if(imageLoaded(this)) {
$(this).trigger('load');
}
});
}
function checkAllLoaded(loadCount) {
if (loadCount <= 0) {
$('#pageData').animate({
height: $('#pageContent').height()
}, 600, function() {
$('#pageContent').fadeIn();
});
}
}
This is probably a simple question but I am stumped and just don't know where to start.
I have a PHP script (image_feed.php) that returns a URL to an image. Every time this URl is called it returns the latest image available (the image changes every couple of seconds).
What I want to happen is that when the page loads, there is an AJAX call to image_feed.php, which returns the latest url. This URl is then inserted into the HTMl replacing the appropriate image src.
After 5 seconds, I want the process to repeat, and for the image to update. However, I don't want the image to be swapped until it has finished loading, and I want to avoid a white space appearing before the new image loads.
At the moment I have the following jQuery, which simply loads the return value of image_feed.php directly into a div called #image1. image_feed.php is correctly formatted to provide a html image tag.
$(document).ready(function(){
var $container = $("#image1");
$container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>')
var refreshId = setInterval(function()
{
$container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>');
}, 5000);
});
This works, but there is a problem. I get a white space the size of the image in IE and Firefox every time the image refreshes, because the image takes a while to download.
I know what I need to is for image_feed.php to return the plain URL to the image. I then use some jQuery to request this URL, pre-load it and then swap it with the existing image.
However, I'm still struggling to get anywhere. Could someone be so kind as to give me some pointers / help?
$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});
Untested. Code above should load the new image in the background and then set the src attribute of the old image on load.
The event handler for load will be executed only once. The .complete check is necessary for browsers that may have cached the image to be loaded. In such cases, these browsers may or may not trigger the load event.
You can. When you want to reload something, you can just append a search query, so that it refreshes the source.
For Eg., when there is a frequently changing image (say captcha) and you wanna load it again, without refreshing the browser, you can do this way:
Initial Code:
<img src="captcha.png" alt="captcha" />
Refreshed Code:
<img src="captcha.png?1" alt="captcha" />
The script used here would be just:
var d = new Date();
$('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds());
Hope this helps! :)
Consider, if you have to fetch the URL again from the server, for a new image URL, you can do this way:
$.ajax({
url: 'getnewimageurl.php',
success: function(data) {
$('img').attr('src', data);
}
});
The server should return only a new image name in it. For eg., the PHP code should be this way:
<?php
$images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii");
die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images.
?>
I suggest you use jQuery 'onImagesLoad' Plugin
This provides you with a callback when an image has finished loading.
When you receive new image URL from server, you create a new <img object with src="new_url_from_server" and attach 'onImagesLoad' callback to it. When your callback is called, your image has finished downloading.
Now you can just replace the 'src' attribute of old img object with new_url_from_server.
Since new image is already avaiable in cache, it will not be downloaded again and will be immediately displayed!
Aletrnatively, you can hide the old image and add this new image to DOM (not required if above works correctly)
Some bare bones sample could be like this:
<!DOCTYPE html>
<html>
<body>
<img id='bla' src="10.jpg" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.onImagesLoad.js"></script>
<script type="text/javascript">
$(function(){
var img = $('<div><img src="http://myserverbla/images/verybig.jpg"></img></div>');
img.onImagesLoad({
all : allImgsLoaded
});
function allImgsLoaded($selector){
var allLoaded = ""; //build a string of all items within the selector
$selector.each(function(){
$('#bla').attr('src','http://myserverbla/images/verybig.jpg');
})
}
});
</script>
</body>
</html>
I need some suggestion on how to work this around.
I have an Ajax code to execute when the LInk is clicked in my page. The ajax code is to call the PHP code to query the images(thumbnail size) filename inside a certain directory. Once executed, the ajax data will have the filenames of my thumbnails in that directory and display the thumbnails in my page dynamically.
I want to know any suggestion how to check if all thumbnails are already finished loading without using the SetTimeOut()? and execute some jquery codes once all thumbnails are loaded. I need my thumbnails to be loaded so I can set the size of my thumbnails div for scrolling.
Method:
function imagesLoaded(imgAr, callback){
var
// This is a copy of the array of images
imageAr = imgAr.slice(0),
// This holds the javascript Image Objects
images = [],
// This is the number of Images that has loaded
loadedCount = 0;
var imageLoaded = function(){
// An image has finished loading, so increment the number of images loaded by 1
loadedCount++;
if(loadedCount>=imageAr.length){
// If all images have finished loading, run the 'callback' function, to report back that images have all loaded
callback.call();
}
}
// Loop around each image url
for(var i=0;i<imageAr.length;i++){
// For each image, create a new object
images[i] = new Image();
// when the image finishes loading, call the imageLoaded function
images[i].onload = imageLoaded;
// Assign the image the appropriate src attribute
images[i].src = imageAr[i];
}
}
Use:
var imageAr = ['a.jpg', 'b.jpg', 'c.jpg'];
imagesLoaded(imageAr, function(){
alert('Images loaded!');
});
You could use load method for the images, like:
$('someElement img').load(function(){
//all loaded
});
Did you mean something like that
I am using the following script to display big images on mouse over the small images (example photo attached in the last). I want to show the 'loading' image (like this) while the big image is being downloaded from the server. How can this be achieved?
Note: I have asked a similar question here but I was not successful in applying the append function to the following code. Please help.
<script type="text/javascript">
function showIt(imgsrc)
{
var holder = document.getElementById('imageshow');
var newpic= new Image();
newpic.src=imgsrc;
holder.src=imgsrc;
holder.width = newpic.width;
holder.height=newpic.height;
}
</script>
<body>
/***on hover, xyz.jpg will be replaced by bigA.jpg and so on***/
<img src="smallA.jpg" onMouseOver="showIt('bigA.jpg')"/>
<img src="smallB.jpg" onMouseOver="showIt('bigB.jpg')"/>
<img src="xyz.jpg" id="imageshow" />
</body>
Images have a load event. As long as you set the load handler before the image.src is set, you should get notified when the image has successfully loaded or encounters some kind of error in loading. I do that very thing in a slideshow that I wrote so I know when the next image is ready for display and I display a wait cursor (animated gif like you're wanting) if the image has been delayed more than one second beyond it's appointed display time so the user knows what's going on.
In general, you can do something like this:
function loadImage(url, successHandler, errorHandler) {
var myImg = new Image();
myImg.onload = myLoadHandler; // universally supported
myImg.onabort = myErrorHandler; // only supported in some browsers, but no harm in listening for it
myImg.onerror = myErrorHandler;
myImg.src = url;
function myLoadHandler() {
successHandler(myImg, url);
}
function myErrorHandler() {
if (errorHandler) {
errorHandler(url);
}
}
}
Using code like this, you can display the wait cursor when you initiate the image load and hide it when the successHandler gets called.
If there were any other listeners to these events, then you should use addEventListener or attachEvent instead of onload, onabort, onerror, but if there's only one listener, you can go either way.
If the desired images are known in advance, then it's sometimes a better user experience (less waiting) to preload images that may be used later. This gets them into the browser's memory cache so they will appear instantly when needed. One can preload images either in HTML or in JS. In HTML, just insert tags into the web page for all the desired images (but hide them with CSS). In JS, just create an image array and create the image objects:
// image URLs to preload
var preloadImageURLs = [
"http://photos.smugmug.com/935492456_5tur7-M.jpg",
"http://photos.smugmug.com/835492456_968nf-M.jpg",
"http://photos.smugmug.com/735492456_3kg86-M.jpg",
];
var preloads = []; // storage for preloaded images
function preloadImages() {
var img, i;
for (i = 0; i < preloadImageURLs.length; i++) {
img = new Image();
img.src = preloadImageURLs[i];
preloads.push(img);
}
}
This will cause all the images in the preloadImageURLs array to be preloaded and available instantly later on in the life of the web page, thus preventing any user delays while waiting for images to be loaded. Obviously, there's a short amount of time for the preloaded images to actually get loaded, but for smallish images that usually happens before the user interacts with the web page so it makes for a faster feel to dynamic parts of the web page that use images.
<img id=access src=loading.gif>
<script>
window.onload=function(){
document.getElementById('access').src='access.jpg';
}
</script>
Hope this helps.
How can I load individual Div separately without affecting current page and show loading status for that div with PHP and MySQL or Ajax and SQL
I do this:
first you have the hidden div with a loading if in it and a load button:
<div id="displayDiv" style="display: none">
<img id="loadingGif" src="loadingGif" style="display:none"; />
<div id="actualContent" style="display:none" />
</div>
<input type="button" id="loadButton" />
Then you have the JS code ( I use jQuery )
<script type="text/javascript">
$(document).ready( onDocumentReady); // this runs before page load
function onDocumentReady()
{
$('#loadButton').click( onLoadClick ); //assign action on button click
}
function onLoadClick()
{
$('#loadingGif').show(); // show the loading gif. It won't show as long as it's parent is hidden
$('#actualContent').hide(); // hide the actual content of the response;
$('#displayDiv').show(); // display the div
$.get("test.php", onRequestComplete ); // make the ajax request to the stand alone PHP file
//so as long as the content loads, the loading gif will show;
}
function onRequestComplete( data )
{
$('#loadingGif').hide();
$('#actualContent').html( data );
$('#actualContent').show();
}
</script>
So. You have a container "displayDiv"; inside you have an image "loadingGIf" and another container "actualContent"; When you click the load button, the big container with the loading gif appears, notifying the user that something is loading. When the content is loaded, you just hide the loadingGif, and display the info in the "actualContent" gif. In the test.php you just echo what must appear in the div. I recommend using JSON, but you'll read more about it.
Hope this helps.
Use PHP+AJAX + Mysql create a ".php" file containing that , call the Ajax function in which this .php(DO not give this name t your file, this is just an reference example) file must be called.. which will displayed as per the event call...