I saw a blog saying that Tudou's pictures are lazy loaded.The principle is this:the pictures below the visible area of ​​the page are not loaded first,When the user scrolls down to the picture position,Load it again.The advantage of this is that when the page has several screens of content,This way we can load only the images the user needs to see,Reduce the load on the server when sending image files to the user's browser.

Recently started to organize some useful plug-ins I wrote before,... ^-^ !!!

As the page becomes more and more informative,Especially like Taobao,Shopping sites like JD.com,The homepage is their lifeline,--|||||

Recently doing a bank website,Only by pushing the front page can you get more attention.As a result, various business personnel began the battle for the location of the home page.To quell their war.Reflecting my tolerant side, hahahaha

The homepage covers all their needs,They leave with satisfaction,So the technical manager came,Say why the homepage is so big,Then, minus! !! !!

Bear the brunt ofReducing the number of pictures in k is not enough.Alright, let's get to the topic.The undisplayed part of the long page can be left unloaded,Saving traffic is saving money,Go! !! !!

The idea is,Determine the position of the picture on the page,If the position of the picture is greater than the current screen height,Then display the picture,Otherwise hide the picture.

Why did you hide the picture at first,Very simple,, give a property csii_src that the browser does not recognize, when you need to display an image, element.src=element.getattribute ("csii_src") ;, the idea is very simple RightOn the code.

function lazyload () {
var map_element=();
var element_obj=[];
var download_count=0;
var last_offset=-1;
var doc_body=null;
var doc_element=null;
var lazy_load_tag ​​= [];
function initvar (tags) {
doc_element=document.compatmode == "backcompat"?doc_body
lazy_load_tag ​​= tags || ["img", "iframe"];
function initelementmap () {
for (var i=0, len=lazy_load_tag.length;i<len;i ++) {
var el=document.getelementsbytagname (lazy_load_tag ​​[i]);
for (var j=0, len2=el.length;j<len2;j ++) {
if (typeof (el [j]) == "object"
&&el [j] .getattribute ("csii_src")) {
element_obj.push (el [j]);
for (var i=0, len=element_obj.length;i<len;i ++) {
var o_img=element_obj [i];
var t_index=getabsolutetop (o_img);
if (map_element [t_index]) {
map_element [t_index] .push (i);
} else {
var t_array=[];
t_array [0]=i;
map_element [t_index]=t_array;
download_count ++;
function initdownloadlisten () {
if (! download_count)
/* var offset=(window.messageevent&&! document.getboxobjectfor)?doc_body.scrolltop
:doc_element.scrolltop;* /
var offset;
if (os.firefox) {
} else {
var visio_offset=offset + doc_element.clientheight;
if (last_offset == visio_offset) {
//settimeout (initdownloadlisten, 200);
var visio_height=doc_element.clientheight;
var show_height=visio_height + offset + 20;
for (var key in map_element) {
if (img_show_height>key) {
var t_o=map_element [key];
var vl=t_o.length;
for (var l=0;l<vl;l ++) {
element_obj [t_o [l]]. src=element_obj [t_o [l]]
.getattribute ("csii_src");
delete map_element [key];
//settimeout (initdownloadlisten, 200);
function getabsolutetop (element) {
if (arguments.length!=1 || element == null) {
return null;
var offsettop=element.offsettop;
while (element=element.offsetparent) {
offsettop +=element.offsettop;
return offsettop;
function init (tags) {
initvar (tags);
initelementmap ();
initdownloadlisten ();
$(window) .scroll (function () {
initdownloadlisten ();
init ();

Deficiencies,The page structure must be fixed.The height of the picture must be set.Otherwise, the height of the picture from the top cannot be calculated.Be careful.

Let's take a look at how another small partner achieved it

      var temp=-1;//It is used to judge whether it is scrolling down (you don't need to judge to delay loading the picture if you scroll up)
      window.onscroll=function () {
      var imgelements=document.getelementsbytagname ("img");
      var lazyimgarr=new array ();
      var j=0;
      for (var i=0;i<imgelements.length;i ++) {
       if (imgelements [i] .classname == "lazy") {
        lazyimgarr [j ++]=imgelements [i];
              var scrollheight=document.body.scrolltop;//height of scroll
      var bodyheight=document.body.offsetheight;//body (page) total height of visible area
      if (temp<scrollheight) {//is true to indicate scroll down,Otherwise scroll up,No action is required.
       for (var k=0;k<lazyimgarr.length;k ++) {
       var imgtop=lazyimgarr [k] .offsettop;//1305 (picture ordinate)
       if ((imgtop-scrollheight)<= bodyheight) {
        lazyimgarr [k] .src=lazyimgarr [k] .alt;
        lazyimgarr [k] .classname="notlazy"

The idea is as follows:first set the value of src to a very small image file path in thetag,The value of the alt attribute is set to the path of the image file to be displayed,When scrolling down to the picture,Replace the value of src with the value of alt, this will automatically load the image to be displayed,At the same time, set the label to a class with a value of lazy. After loading,Set its value to notlazy to determine which images need to be loaded,Which are not needed.

  • Previous Detailed explanation of several small questions about SQL (sql advanced)
  • Next C # memcache introduction