learning CSS

_Q12_

I am learning CSS so dont shoot me with bad attitude. In this code I am learning how to use sprite in CSS.

CSS

body {background-color: powderblue;}
#img1{
	background: url("testCSS.png") 0px 0px;		/\*select which sprite to show;\*/
	background-repeat: no-repeat;
	width: 60; height: 30px; 					/\*resize border for image;\*/
	background-size: 100px 50px;				/\*resize image (best not to resize);\*/
	}
#img2{
	position: absolute;
	width: 25px; height: 25px; 				    /\*resize border for image;\*/
	left: 50px;  top: 50px;

    background: url("testCSS.png") -0px -25px;
	background-size: 100px 50px;				/\*resize image (best not to resize);\*/
	}
#img3{
	position: absolute;
	width: 25px; height: 25px;
	left: 100px;  top: 100px;

	background-image: url("testCSS.png") ;
	background-size: 100px 50px;
	background-position: 75px 25px;
    }
.square{
	position: absolute;
    width: 30px; height: 30px; ;
	left: 150px;  top: 150px;

    Background-color: #FF0000;
}


![](test.png) hi1
![](test.png) hi2
![](test.png) hi3

box

I have a real problem to resolve, that's why I have to learn this CSS ?language?helper? I have 1350 images to load into a single plain html page. The images, i made them as small as I could 150x120; barely to distinguish the message. And is taking 20 seconds until the page is finished loading. At higher resolution per image, higher load time! I want the page to load close to instant. It's not for a public website, its a local file only for me. And I google-find that there are some ways to shorten load time. The best one that suit my case are the sprites. I read about them all day. And this code is my practice on this thing. But I am worried about it. Probably i am so new to this thing. This code here; every img# instance i have here, is loading !A NEW! png image? If it does, it is loading a ton of images and it beats the purpose of using sprites. I want to load one time the sprite image(in a string variable) and reference it in CSS code. Again, i am new to this thing. Please make some sense for me. Thank you!

#img1{
	background: url("testCSS.png") 0px 0px;
	}
#img2{
	background: url("testCSS.png") -0px -25px;
	}
#img3{
	background-image: url("testCSS.png") ;

Nathan Minier

This isn't really a CSS problem, but rather a latency/synchronous call one. Here's the deal: your CSS operates in a synchronous manner, which means that it makes one request, receives a response, then makes the next, and so on. In your case it's doing that at least 1350 times. It's never ever going to be instant with your current design. Now, I'm assuming that the user (you in this case) are not viewing/consuming 1350 image files at once, so there's a workaround called AJAX. You pull down the images that you need instantly, and have a JavaScript running that will pull down images as you scroll. One jQuery library that does this is [GitHub - webcreate/infinite-ajax-scroll: Turn your existing pagination into infinite scrolling pages with ease](https://github.com/webcreate/infinite-ajax-scroll)

"Never attribute to malice that which can be explained by stupidity." - Hanlon's Razor

_Q12_

very cool response! - thank you mister Nathan Minier. (Intuitively) I was afraid of this part actually. This sucks. I was thinking to make multiple pages with fewer number of images to load (as my backup plan). Your plan to load as I scroll, ugh, it's hard (for me as a beginner into html helper languages). Is a good idea - dont take me wrong. It's not impossible, but hard for me at my level. Another idea is to use variable in javascript... i have no idea if it will work. I'm thinking on variants. I will have to test/try. But is faster to ask. If you have other alternatives (to load faster) put your answer here please. Thank you!

W Balboos GHB

Another option: if you don't have an actual need for the images to be individual, make sheets, each of which has a lot of images. Now, each call will load hundreds of images at a time, depending upon how many you put on a sheet - Then - if you need individual image access, have the option to load images from a single sheet as individual when (something, like a button) on that sheet is clicked. You may even be able to put larger images on the image-sheets (first paragraph) for better visibility.

Ravings en masse^

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

_Q12_

can you show me an example please? A link that describes this "sheet' that you are talking about. By sheet you mean like a sprite, One Large image with multiple images inside it? OR a file that contain the roots for all the images in a folder? For example: My original question i was referring to this kind of sprite - You are referring to the same thing? https://www.advena.me/advena/wp-content/uploads/2017/10/WalkingManSpriteSheet-2400px-1024x157.png[^]

W Balboos GHB

You are using tunnel vision (i.e., fixed on a single idea) with the sprites. Open your favorite image editor. Create a blank page. Paste a lot of your little images on it Save it as a single image (jpg, for example (smaller than png)) Now a single image will allow your users to view many images. Something you've seen before, like this: https://assets.awwwards.com/awards/external/2017/07/59689b0d0ea87.jpg[^]

Ravings en masse^

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010