JQuery image lazy loading plug-in, dynamically obtain image length and width dimensions_html/css_WEB-ITnose

In the past, the website bandwidth was small and there were not many large pictures. This is different now. Various picture websites are springing up like mushrooms after a rain. The server resisted, but the client had objections. Too many pictures would inevitably lead to slow page loading, especially for some sites with a table structure. Can the image be loaded after the page has finished loading? I think this is an issue that most site administrators are concerned about. Nowadays, image lazy loading technology is not a rare thing, especially with the popularity of JQuery. If you want to write a simple lazy loading code, you can easily do it.

We all know that the general img tag has a src attribute. When the browser parses the img tag, it will read the value of the src attribute and obtain the image from the address pointed to by the value. If we write the image address not on the src attribute but on the data-original when writing the img tag, the browser will not go to the image address to get the image. When we need to load this image, we change the data-original attribute into the src attribute and we're done.

The above is the idea, let’s start taking action.

<img data-original="http://www.zheng-hang.com/zb_users/upload/2015/04/201504051428245988387483.jpg">

$(function(){    $("img").each(function(i,n){        var img_path = $(n).attr("data-original");        $(n).attr("src",img_path);    })})

　

　

This is the most original lazy loading, because we all know that this js code will be executed after the page is loaded, which means that the user can already operate the page before seeing the picture, so it will not affect the user of use. However, this code cannot meet the diverse needs of users. For example, someone wants to display a default image, such as a loading gif image, before the page loads the real image.

There are also pictures below the visible range of the page, which will only be displayed when the user scrolls to a certain height. Such pictures do not need to be displayed when the page is loaded. Displayed, we can also achieve it through plug-ins. At this time, it cannot be done with just a few words of JavaScript. We can write a jquery plug-in ourselves to complete our work.

The following is the plug-in jquery.lazyload.js that I wrote myself