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.
<!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.
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>To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a front-end full-stack learning buckle qun: 784783012 unpaid share some senior front-end development engineers recorded video (from zero base to project real case), front-end engineers the necessary knowledge. Also receive free learning resources
when the real start learning inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.