We Keep Coding

Carousel slider loads first but images take time to load

I am using carousel slider in my website using bootstrap.
Problem:
When i open my webpage the slider in header section loads first but first image take time to load on the slider. I want to solve my problem.
What i want :
I want that if slider loads then images must be load at the same time otherwise if images taking time to load then slider should be load when images are ready to load on the webpage.
Kindly suggest me what i should do.

If you slider contains more than 10 images and if images are of big size, then follow these steps,
Apply src to only first 3 images of slider. For rest images, apply image url to new attribute 'delayedsrc'. delayedsrc attribute contains your image url. Also apply class 'defered_loading' to these images.
then add this js code,
$('.defered_loading').each(function() {
$(this).attr('src', $(this).attr('delayedsrc'));
}).promise().done(function() {
// intialize your slider here
});

Loading large number of images without affecting user experience

This is basically a design question.
Preface
I have a web page which shows a list of thumbnails. The number of images can be anything, maybe hundreds.
What I need to do is this?
Get the number of total thumbnails.
Get the web url for each image.
Load each thumbnail into a box (div) and add each box dynamically to
scrollable container div.
User should be able to interact with the boxes ASAP.
I have other AJAX calls happening in the page.
The default method, set the src to each box and add it to the container. When loading stops, the image shows. The problem is that, all these image loading will hog the network and my other AJAX calls may timeout, which I can't allow. Also, the user should see the page as loading complete (loading bar should not show activity).
My Solution
The solution I have come up is this:
Use a local image as space holder.
Set the src of all the boxes as local image.
Change the src for first image to the web url.
When onload of the image fires, change the src of next image and so on.
Pros:
Only one image will be loading at a time.
User will be able to interact with the boxes.
Cons:
Only one image at a time may be a waste of bandwidth (what about 5 images at a time?)
What happens if user scrolls to the end, the images won't show up until all the other images have loaded.
Your opinion
I need expert opinions on how to improve this solution.
Requirements:
Some bandwidth should be available for other AJAX calls
User should be able to interact with the page.
Questions:
Is this solution having any other issues?
Is this cross browser?
Am I correct in saying this will not affect the other AJAX calls?

Does dynamic image loading decrease server overload?

Example if I make a script that loads images only when user scrolls page to the location of where the image should be, would that script reduce page loading time and is it better in the long term?

You wont decrease the time for the dom to become ready and displayed (at least not by much). Images are loaded asynchronously by the browser and thus placeholders are put in place of images until they are fully loaded.
I would however suggest as you said implementing a script that loads images as they are needed, no point wasting peoples bandwidth with images that aren't needed. (If you have a lot of images), for example like google image search.
Bear in mind, if a user loads a page and scrolls down very quickly, a page that laods all images at once will have to wait for all images to load to guarantee the ones in view are displayed. If you implement some sort of script you can control the way and order in which the images load.

Yes, you will reduce the loading time, but you will make your users wait for images to load when they scroll down.

Executing JS/jQ before images fully load

I have the following code, it calculates the width of a group of images in a horizontal gallery and applies it to a div so that they all fit:
jQuery(window).load(function() {
var totalwidth=0;
jQuery('#gallery img').each(function(){
totalwidth+= jQuery(this).width() + 15;
});
jQuery('#gallery').width(totalwidth+100);
});
The problem is, in a gallery of 100 images, no images are visible until all images are loaded. I don't know how to get around this, I want the images to load one after the other as they would on any other site.
Can it not calculate the width of all images, then apply that width to the div and load the images so the user can start browsing through them? Or does it need to fully load an image to obtain the width?
Thanks

Without a bit more information on your html elements and exactly what you're trying to achieve it's difficult to give more advice but here's a first stab:
Javascript is client side scripting, essentially if your browser doesn't have the information, javascript doesn't. So, to get around that you could initially hide the images or their container and in your loop show them one by one as the function executes on each image - that way the calculation is done before the image is shown but the user feels like their getting a more instant response.

The browser knows the size of the image, when it's loaded.
You could put them in a hidden div, calculate the sizes and then display them one after another. Maybe this would work out for you.

Stop GIFs from Preloading

I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks

Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});

You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.

You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.

Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.