how to manage,speed up and preload all the images on the page?

Question

Okay, this has been my headache for long enough. I am learning to build a dynamic news/blog website which derives image sources from MySQL database. There are different section on the website which pick images from same table on database by different tags. Most of the images I use are from external sources like google, yahoo, etc. So my questions are:

1. Where do you keep your images? I mean should I use images from external sources or should I save image in my website directory? Or a cloud service like one drive?

2. How do you preload all the images on website? Because on my site they load really slow?

3. How to show just empty dives until the images are loaded, like Facebook does.

4. If the images are on other websites (of which images I am stealing) are optimised? If so then do I still need to save and optimise it again?

Answer 1

1. A cloud service would be expensive because of the quantity of images you will have and external spurces is a big no. I will always choose to put them in my website directory

   Once they put the content offline or block access, your site will be broken. – Manuel Otto

2. I don't know about jquery, but: preload images with jquery

3. Javascript, DOM. The example at the bottom is completely adjustable to how you want to show the images.
4. I would say: don't

This is just an example.

document.body.addEventListener("load", myFunction);

function myFunction() {
    document.getElementById("allMyImages").style= "background-image: src("myImage.jpg");";
}

It triggers myFunction when the webpage has been fully loaded.

Answer 2

1. Keep your own images on your own server. Don't rely on external sources to always be up/functional. But also, be careful of using copyrighted images/graphics.

2. You can use javascript to hide and show your page when the document has fully loaded. If you have too many images, lazyload can be an option so that you don't put too much strain on the users connection.

3. Specify a width and height for the container to keep the proportions while the image loads

4. I'm guessing the output is optimized so the 'stolen' one should be too