Many considered normal display icon, the icon is a single icon found a single file used in the project page, use the time to hang directly to the page, which is really the norm now page.
If the site is hanging out online, or speed is too low, and a large number of icons of the case, due to the number of concurrent connections the browser and the server is limited, usually 4 to 8, the icon is displayed too slow or timed out the situation occurs. Of course, like using CDN, or by any number of concurrent browser for picture files distributed storage domain is no better treatment, but not have such conditions.
Usually the icon file to do as little as possible, nevertheless, a 50k file compared to 50 1k file download them still very dominant. So, how will a single icon in a picture displayed on the page, because there is no segmentation function of the picture.
First, we assume that the icon image is commonly used in tree view:
Do a simple page, put two div, required folder and file icons are displayed on both div.
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>The display method is simply to set the size of the element size to an icon, the picture as a background element, set the left and top of the picture so that the corresponding icon is revealed.
Define a default style, size specified elements, icon here is 32 * 32, still set the size of the element.
.tree-default {
width:32px;
height:32px;
}Defined folder icon display style is to speak icon image as the background, adjust the left and top coordinate values in accordance with the position of the icon.
.tree-folder {
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
}Definition file icon display style, adjust the position of the file icon is located.
.tree-file {
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
}Give element located on the style.
<div class="tree-default tree-file"></div>
<div class="tree-default tree-folder"></div>This process is not without conditions, but also as a single image compression, not all of the icons on the picture, can be common on a picture, if too much can be placed into multiple images.
Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip
All the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tree-default{
width:32px;
height:32px;
}
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
}
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
}
</style>
</head>
<body>
<div class="tree-default tree-file"></div>
<div class="tree-default tree-folder"></div>
</body>
</html>