Shulou(Shulou.com)06/03 Report--

This article mainly explains "the application of jQuery's picture delay loading technology". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the application of jQuery's picture delay loading technology".

This article uses a page layout plug-in Masonry written by David DeSandro, which is based on the jQuery library and provides many parameters and methods to customize different effects according to different needs.

XHMTL

The first step is to introduce the jQuery library and the Masonry plug-in.

We build a html page modeled on Sina Weibo, and DIV#container places multiple identical DIV.photo.

"Xiao": sell it at any time, and it's delicious.

.n photo...

CSS

# container {width:780px; margin:10px auto} .photo {float:left; width:205px; margin:10px; padding:10px; border:1px solid # d3d3d3; background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px; background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px; border-radius:4px;} .photo img {width:205px} .photo p {line-height:20px; margin:4px auto}

JQuery

$(function () {$('# container') .masonry ({itemSelector: '.photo', columnWidth: 247});})

Call the masonry plug-in, and the configuration parameter itemSelector corresponds to the value of div,columnWidth with class of photo and columnWidth of 247 is obtained by the width of .photo + padding*2+margin*2+border*2.

The above only introduces the wall layout, and then introduces the picture loading technology and scrolling loading technology combined with this article.

When we browse the pages with a very large number of pictures, such as Taobao Mall, Bing Image search and other websites, the loading of pictures is very smooth, in which the delayed loading technology is applied. This article explains the Lazyload image loading plug-in, when we open the page, we first load the picture in the visual area of the screen, as we scroll down the page, the picture will be loaded one after another, thus improving the speed of opening the page.

Lazyload is a jQuery-based plug-in, on the page where a large number of pictures are to be displayed, the images are loaded on demand, only in the browser's visual area, and when the user uses the scroll bar to drop down, the subsequent images will continue to be loaded. In a sense, this technology reduces the load on the server. You can download the version of http://www.appelsiini.net/projects/lazyload from the official website of Lazyload.

XHTML

First load the jquery library and the lazyload plug-in:

Place multiple pictures to display in the area where you need to place pictures in body. The more pictures, the more obvious the effect.

Note that the src attribute of each image corresponds to a predefined image, which is a substitute image before the real image is loaded, we usually use 1x1's blank.gif image. The real picture is specified by the property data-original, and then you need to set the width and height of the image.

JQuery

(function () {$("img") .lazyload ({effect: "fadeIn"});})

As with many plug-ins, you only need to call lazyload () on the element, and now you can see the effect. Lazyload also provides several parameters to set different effects.

Threshold: sensitivity, that is, you can set the sensitivity to control the loading of the image, such as 200,200 pixels before loading the picture, the default is 0, that is, when the image boundary is loaded.

Event: bind events, that is, you can trigger the loading of images by binding click, mouseover, or any custom event. The default is to trigger picture loading when the user scrolls to the picture window.

Effect: set the effect, that is, you can set the special effects when the image is loaded, such as fadeIn. The default is show.

You can also set the horizontal or vertical scrolling loading effect of images in a container, but this is rarely used. For more information, please see the lazyload website: http://www.appelsiini.net/projects/lazyload

Thank you for your reading, the above is the content of "the application of jQuery picture delay loading technology". After the study of this article, I believe you have a deeper understanding of the application of jQuery picture delay loading technology, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.