Tips: When you see this prompt, it means that the current article has been migrated from the original emlog blog system. The publication time of the article is too long, and the formatting and content may not be complete. Please understand.
The Difference Between Fast and Slow Internet Speeds
Date: 2020-11-7 Views: 931 Comments: 6
The Difference Between Fast and Slow Internet Speeds
With the popularity of the internet, users are paying more and more attention to the speed of response. The faster the website, the higher the user's stickiness and conversion rate.
Simply put, speed needs to be improved! There are many factors that affect website speed, such as......................
Being serious is not my style, so please watch my performance below.
Origin of the Idea#
The initial idea was to use pure CSS to achieve the effect of loading the background image together with the webpage by encoding the base64 of the base image and placing it directly on the background-image.
Step 1:#
First, process the prepared material images, remove the swimsuit and swim skirt.
Step 2:#
Create a new HTML file.
Step 3:#
<div class="nude">
<div class="swimsuit" id="swimsuit"></div>
<div class="swim-skirt" id="swim-skirt"></div>
</div>
Done...
Then I found a problem. Because my base image file size reached 12MB, the encoded string was too large, which caused the webpage to load slowly and have a poor user experience. Moreover, the background image loaded in this way suddenly appeared, which was too abrupt and had a poor effect.
Later, I switched to:#
CSS + JavaScript to achieve the effect. The background image is loaded directly by background-image, which can achieve a gradual display effect. After the base image is loaded, the additional images are dynamically inserted by JavaScript.
window.onload = function(){
var img=new Image();
img.src='nude.jpg';
if(img.width==0){
alert('Image failed to load')
}else{
document.getElementById("swimsuit").style.backgroundImage="url(swimsuit.png)";
document.getElementById("swim-skirt").style.backgroundImage="url(swim-skirt.png)";
}
}
User Comments:
Barbie 6 months ago (2020-12-01)
Haha, quite interesting.
Self-study College 6 months ago (2020-11-26)
Is it you, Shangguan Xiuer? Is it you, is it you, is it you?
Rainshaw 6 months ago (2020-11-21)
bksn[#aru_13] Xiuer
Divine Armor - Don't Forget 6 months ago (2020-11-18)
You deserve it.
Ajue 6 months ago (2020-11-18)
@Divine Armor - Don't Forget: Thank you for your praise.
Shenzhen Self-study Office 6 months ago (2020-11-11)
There are a lot of dry goods, thank you for sharing! [#aru_1]