recently encountered a picture loading optimization problem, I want to set a background, but there is a certain time to load the picture, so I want to load the picture before the completion of a waiting icon, similar to loading, but do not know how to judge css background url (), if the picture img can directly use the onload method, how should I do better?
or how should I cache an image of about 2m? Thank you for your advice.
var loading = true;
var img = document.createElement('img');
img.src = 'url';
img.onload = function(){ loading = false; }in fact, I already know that chrome caching is actually quite good. Of course, opening developer mode is actually disable cache, so I would like to remind the debugger to pay attention to this.
do I have to use background? In fact, you can use the loading diagram as background, and the 2m picture can be used with img
<img class="bg-img test-img" src="2M"/>.bg-img {
background url(loading)
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.test-img {
width 200px
height 200px
}
first of all, there is no event of javascript to judge the loading state of background image. At present, the best solution to this problem is to new an Image, set the src to the path of the image as background image, and then listen for the load event of the image.
refer to codepen
for specific implementation.if you want to use off-the-shelf, someone packaged a jquery plug-in: waitForImages , using the same method as above.
has been tested, and this scheme is feasible even if the browser turns off the cache.
A picture grows slowly when it slides up to a certain extent. Why does it bring out a line that has been entangled all night? I can t find the reason. ...
my Q starts from scratch, but I want him to write ti+= < p claqss= "title-count " > has answered 8 questions + Q claqss= "title-count " > answered 1 question correctly; wrote like this: ti+= < p claqss= "title-count " > answered 8 questions + Q...
try the events and methods of jqgrid api, are useless, ask the boss what good methods are available ...
the new project found that testing the drop-down on chrome will refresh the page look at Mobile Taobao s implementation of the drop-down and do not know how to achieve it ...
...
recently read the front-end https: www.w3cplus.com mobil. this article, feel very troublesome, why not learn Android ...
Why does the problem of redirection occur when using ajax to request other websites $.ajax({ url:"https: www.baidu.com", type: GET , headers:{ Access-Control-Allow-Origin : * ...
canvas draws multiple ball collisions on the canvas. How can I add a click event to the ball? as far as I know, adding an event to the canvas actually gets an area on the canvas to fix an event? Is it true that the ball can not be added if it keeps ch...
demand is 1: 15 days after the current time is banned, 2: the date range can only be within 7 days. If the start time is the 2nd, the end time cannot be greater than the 8th, and the rest display mouse display is disabled . have you ever done it, ...
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=...
page cannot be pulled and loaded, and the event cannot be triggered ...
RT, has always wanted to realize the dynamic switching of tab tabs in vue, such as I would like to ask you if you can use watchSlidesVisibility on vue mobile. I would appreciate it if you could paste the code. ...
as shown above, it needs to be done like this. I use BEM, but I struggle with the naming of each ranking item. Is it more reasonable for each project as a rank or as a rank__item? 1 <div class="rank"> <div class="rank__...
recently encountered a need for tab to dynamically switch content, so think of the vue-awesome-swiper plug-in and ask the gods to tell you how to write the following effects I hope that God can paste the source code so that the upper and lower swip...
<ul class="fs-8" id="select-product-app"> <li class="chose-btns-contianer">25< li> <li class="chose-btns-contianer">26< li> <li class="chose-btns-contianer">...
you can only get the value converted to px with getComputedStyle ...
the most recent project is to make a recording. The player generated after app, recording should be added dynamically. Is the player implemented with audio? ...
...
We use wepy to develop Mini Program. The development environment and production environment are different domain names. Cut and return the domain names according to the needs of the environment. does not seem to find the relevant configuration in wepy.c...
The page is shown in the figure the question now is: after I click Delete, how can I tell how much id I deleted? HTML Code: <div id="app" class="container"> <table class="table table-hover"> ...