Loading images with javascript Delay

Loading images with javascript Delay

Today, I will explain how to use javascript to delay image loading.

When a webpage contains a large number of images, If you load all the images at the beginning, it will inevitably cause performance and efficiency problems. Users may leave after a long wait.

At this time, we need to use lazy loading, that is, to delay loading of images to improve the website's affinity.

Delayed image loading

Basic IdeasAs follows:
Set custom attributes for images that require delayed loading, such as lazy-src. The path of the image source exists. Then put all the images to be loaded in an array, in the window. when onscroll is used, determine whether the array content is in the user's sight. If so, assign the custom attribute content to the src attribute of the image.

The following describes the implementation steps.
First, we need to define the position of the visible area of the browser returned by the function:

/*** @ Description: return the visible location of the browser * @ author: Liu Fang * @ date: * @ return: left pulley distance, top: Upper pulley distance, width: visible area width, height: visible area length */function getClient () {var l, t, w, h; l = document.doc umentElement. scrollLeft | document. body. scrollLeft; t = document.doc umentElement. scrollTop | document. body. scrollTop; w = document.doc umentElement. clientWidth; h = document.doc umentElement. clientHeight; return {left: l, top: t, width: w, height: h };}

Then define the function to return the location of the resource to be loaded:

/*** @ Description: return the location of the resource to be loaded * @ author: Liu Fang * @ date: 2015/10/24 * @ params: p: Resource Node to be loaded * @ return: left: left distance, top: top distance, width: width, height: height */function getSubClient (p) {var l = 0, t = 0, w, h; w = p. offsetWidth; h = p. offsetHeight; while (p. offsetParent) {l + = p. offsetLeft; t + = p. offsetTop; p = p. offsetParent;} return {left: l, top: t, width: w, height: h };}

Next, define the function to determine whether the two rectangular areas are intersecting:

/*** @ Decription: returns a Boolean value * @ author: Liu Fang * @ date: 2015/10/24 * @ params: rec1, rec2: the node matrix to be compared * @ return: true: the two matrices intersect */function contains (rec1, rec2) {var lc1, lc2, tc1, tc2, w1, h1; lc1 = rec1.left + rec1.width/2; lc2 = rec2.left + rec2.width/2; tc1 = rec1.top + rec1.height/2; tc2 = cursor + rec2.height/2; w1 = (rec1.width + rec2.width) /2; h1 = (rec1.height + rec2.height)/2; return Math. abs (lc1-lc2)
  

Finally, we monitor image resources. If we enter the user's field of view, we load the resources:

/*** @ Description: The resource appears in the field of view and then loads it. Put the resource into an array. */Var arr = document. getElementsByClassName (divX); window. onscroll = function () {var prec1 = getClient (); var prec2; for (var I = arr. length-1; I> = 0; I --) {if (arr [I]) {prec2 = getSubClient (arr [I]); if (contains (prec1, prec2 )) {// load the resource console. log (arr [I]. id); arr [I]. childNodes [0]. src = arr [I]. childNodes [0]. getAttribute (lazy_src); delete arr [I] ;}}}

Complete Code Location: lazy loading

Of course, here we will only talk about the idea. If it is used in engineering, there are still many defects, such as performance and compatibility. So we recommend a jquery plug-in: lazyload.

Judge whether css loading is complete

By the way, how can I determine whether a css file on a Web page is loaded. We know that css is introduced through external files, but it is actually a link node. Therefore, we can check whether the css file is fully loaded by checking the sheet? sheet.css Rules attribute of the link.

Judge image Loading completed

Similarly, the img tag has a complete attribute. You only need to check this attribute through polling.

Function imgLoad (img, callback) {var timer = setInterval (function () {if (img. complete) {callback (img) clearInterval (timer) }}, 50)} imgLoad (img1, function () {p1.innerHTML ('Load finished ')})

Judge whether javascript loading is complete

How can we determine whether javascript loading is complete? The onload method of the script node is executed after loading. Ie6 and ie7 can be determined by readyState:

function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', file); _doc.appendChild(js); if (!/*@cc_on!@*/0) { //if not IE //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload js.onload = function () { alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload'); } } else { //IE6、IE7 support js.onreadystatechange js.onreadystatechange = function () { if (js.readyState == 'loaded' || js.readyState == 'complete') { alert('IE6、IE7 support js.onreadystatechange'); } } } return false;}