load but also display the image in jquery

I found this post about how to fade images开发者_运维知识库 in jquery:

jquery: fade in image after image

But I am not sure how to do this as I first need to load lets say four images:

1.jpg
2.jpg
3.jpg
4.jpg

So I have four jpeg images, and I want to fade in and out from them every say 30 seconds. How do I first load them into my page and then fade in and out of each one in jquery

---

as I understand you would like to make a cycle. First display image 1, then image 2, then 3, 4 and again 1, 2...

You might be interested in cycle plugin

to insert image you use img tag, the example code looks like this:

   <img src="path/to/your/image.jpg" alt="description of your image" width="100" height="100" /> 

alt is important, because it will be displayed if the picture will not be loaded (for exmaple someone has disabled displaying images). It is also important for searches. Width and height is important, because your website will not be resized after loading the picture, but imiedietely will reserve some space. you can then do something like:

   $('image').hide() .load(function () { $(this).fadeIn(); }) 

However, the link, which I have provided includes all necessary example to do exactly what you need, plus a couple of more nice ways to tackle your problems