I am using the following code for displaying the products of an e-commerce website. While the products are being loaded, the images will slowly fade out and then will come again normal. I want to show an loading image (like this) when the new products are being loaded. What code should I include in the below code to get this done?
function displayProducts(){
$('#product_show').fadeOut('slow', function() {
// Animation complete
setProducts();
$('#product_show').fadeIn('slow');
});
}
I'm not sure what you're #product_show element is, but assuming it is some sort of container, you can just append that image to it (maybe absolutely positioned in the middle). and when it compeletes, remove the image.
Something Like:
$('#product_show').append('<img src="..." class="progress"/>').fadeOut('slow', function() {
// Animation complete
setProducts();
$('#product_show').remove('img.progress').fadeIn('slow');
});
I find it's best to have a loading gif div always present, and just hide/make transparent once load is complete.
Fade out existing, loading gif becomes visible.
Waiting on callback from loading of the new product (ajax call or what are you doing there?)
When you get the callback, then you fade in the new product. Loading gif hidden.
Nice loading gif generator: http://www.ajaxload.info/
Related
The front page of my site has quite a big image as a background, of course I've made it as small as possible but it's still going to take a moment to load on slow connections.
So if the user stays on my site for a while I want to change that background image to another one. I've seen some of the plugins which are available to have something similar but they all seem to load the images all first. Which would be slow for my purposes
So I would like to just load the page as normal. Then after a little delay behind the scenes load another image and once it's loaded, replace the original image. Is this possible?
Sure set an image tag in the body like this: <img id="bgqueue" />
Your CSS would hide that:
#bgqueue {
display : none;
}
And your jQuery would look something like this:
setTimeout(function() {
$('#bgqueue').attr('src', 'http://someOtherjpg').on('load', function() {
$('body').css({background: 'url(' + $(this).attr('src') + ')'});
});
}, 30000);
So the image is loaded into that image tag behind the scenes after 30 seconds in that example, and once it's loaded, the callback fires and sets the body background image to the cache file.
Demo: http://jsfiddle.net/seancannon/TpPkk/
I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.
Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.
Or if anyone has a better solution, please let me know!
FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.
Thanks!
A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.
This seems to be an elegant way to precache the images.
"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:
https://github.com/desandro/imagesloaded"
Source: jQuery event for images loaded
This should work
/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
var oImage = new Image ();
oImage.onload = function ()
{
nLoadCount++;
if(nLoadCount == arrUrls.length)
{
/*Show your content here*/
}
}
oImage.src = arrUrls[i];
}
I have a product gallery in which the product images will be retreived from the server and shown. It takes sometime for all the images to be retrieved and displayed. I want to show a loading image until the image is rendered from the server.
I have tried as below, by giving an if condition to display a loading image until the image tag gets its source. But its not working, as it just shows a blank space until the image get retrieved from the server.
if($image)
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="<?echo $image;?>"><?
}
else
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
<?
}
Please tell me how can i make it work as expected
Well, you'd have to use JavaScript to update the DOM as you'd like to, as PHP will only process the page once. Doing so would mean switching to AJAX to retrieve the images, though, and that feels a bit like overkill for your scenario. Instead, why not give each image its own container, and then give that container a class with a loading image as its background? Then. once the image has loaded, it displays over the previous loader.
You can not do that on the server side alone. One would need to first load simple "snake" images on the php side:
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
and then through javascript (ajax requets) update all the images like so:
// populate imageList
$.ajax({
url: 'your_server_script',
data: imageList,
success: function(response) {
// update teh src property for the images here usign your server response
}
})
As #ranksrejoined pointed out, however, you might be better off using css to give images a container with widht/height and background image. Then that one gets overridden by the image itself.
I think this is what you need: http://jqueryfordesigners.com/image-loading/.
I think you're suggesting an asynchronous load of the image - you may want to use JavaScript for that. Something you may like to try as alternative, is to apply a background image to a container for each child image.
<div style="background-image: ;">
<img />
</div>
Since lowsrc is deprecated, my best next choice would be Lazy Loading.
That means you only load images that can be seen on the screen right now, and not the images that the browser chooses to load, which can be down the page.
If you use JQuery, then take a look at the nice LazyLoad plugin. Definitely going forwards this time :)
Suggested implementation
you would load the jquery plugin, and write your images like this :
<img data-original="<?php echo $image; ?>" src="media/images/snake.gif">
and let the plugin do the hard work
Hope it helps !
I have a problem. I am working on a CMS, its name is Dolphin. In few words I have created a block that contains an heavy code (jQuery, javascript, php, HTML, images...etc..).
What I want to do is to show a loading image until the content of this block is fully loaded. So even if it could seem strange, I need a preload function for a DIV. I need to do it because if I do not use it I can see the div composing slowly, and that's terrible. Do you know a good jQuery or javascript function that can help me with this? Just a loading image in the center of the DIV until its content is fully loaded. As soon as it is loaded then it will be shown.. Thank you!
The trick is setting the real div hidden by default and above it put the "Please wait" div.. in the end of the heavy coding add a line hiding the "Please wait" div and showing the real one.
Sample code for the required HTML:
<div id="pnlPleaseWait">
Loading please wait...
<div>
<div id="pnlMain" style="display: none;">
....heavy stuff going on here...
....heavy stuff going on here...
....heavy stuff going on here...
</div>
And the jQuery lines in the end of heavy processing:
$("#pnlPleaseWait").hide();
$("#pnlMain").show();
Check others questions:
How to show loading spinner in jQuery?
How do I display an animated image during Page Load using jQuery
and so on
I am constructing a lighbox gallery, currently experimenting with FancyBox (http://fancybox.net) and ColorBox (http://colorpowered.com/colorbox).
By default you have to include a link to the large version of the image so that the Lightbox can display it. However, I am wanting to have the image link URLs pointing to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg">
I want to do:
<a href="mysite/photos/view/abc123">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$user=$photo->user;
$this->renderPartial('_photo', array('user'=>$user, 'photo'=>$photo, true));
}
}
At some point in the future the function will also update the view count of the image.
Now this approach is working to an extent - most images load up but some do not load up (the lightbox gets displayed in a malformed state). I think the reason for this is because it is not processing the function quick enough. For example when I click the "next" button it needs to go to the URL, process the function and retreive/output the response.
Does anybody know how I can get this working properly?
I added "width" and "height" attributes on my image tags and it works fine now.