Using jquery to implement picture preloading to improve page loading speed and user body we often encounter such problems when we do Web sites: A page with a large number of images causes the page to load slowly, often appear a white page user experience is not good. So how do we solve this problem? The first thing we will think of is to improve server performance, use static caching and other means to speed up the loading of pictures, this is a good way, but sometimes we can find some solutions from the front desk. Let me introduce a method of JS preloading which is often used in practical application. First in the output picture when we do some processing finished HTML we began to write JS, where I used the jquery class library $ (' img[data] '). Load (function () {var __this__ = $ (this); var url = __ This__.attr (' data '); var src = __this__.attr (' src '); if (url = = "| | url = = SRC)//Here to determine if the actual address of the picture does not exist or has been loaded does not process {return;} var img =newimage ();//Instantiate a picture of an object img.src = url;//The picture to be displayed is loaded Enter if (img.complete)//If the picture is already loaded in the browser cache directly processing {__this__.attr (' src ', url);//The picture to be displayed is replaced by return;} img.onload =function () {/ /To display the picture after loading done processing __this__.attr (' src ', url); }}); All right, try it quickly. is the page loading speed?
jquery enables picture preload to increase page loading speed
