Scroll loading of images on HTML pages of mobile devices,

Scroll loading of images on HTML pages of mobile devices,

Nowadays, mobile Internet is popular all over the world, and the elements of mobile pages are also rich and colorful. It is no longer normal to have more than 10 images on a mobile page. However, many mobile users are still on 2G or 3G networks. For users with such bandwidth, it may take 10 s, 20 s, or even more to load the page when Browsing such a page, seriously affecting the user experience. To solve this problem, it is very important to make the image in the page scroll load (the image is loaded when it appears on the display screen! This can also effectively save the bandwidth of our servers and solve the problem of high request concurrency.

1 ,.

This is the image in the loading process. Chrysanthemum. This is the image after the loading is successful.

 

2. Front-end code implementation

2.1. the HTML code of a normal image should be as follows:

2.2 After the image is loaded as a scroll, the HTML code of the image should be as follows:

Style = "background: url (images/scrollLoading/loading.gif) no-repeat center ;"

XSrc = "http://www.bkjia.com/uploads/allimg/150504/162A36040-2.jpg"/>

Parameter description:

Src: This is a 1 px * 1px gif transparent image (small ). The src address is absolutely not wrong (if it is wrong, the browser will have a Red Cross symbol .), Therefore, I chose to use a small image instead.

Sytle: this is mainly a background image of Chrysanthemum. It is used to display a chrysanthemum loading diagram when a browser requests a server image.

XSrc: This is a custom attribute. The correct address of the img image is displayed.

2.3 After HTML loading, a js file must be introduced to implement rolling loading. Because the bandwidth of the mobile Internet is very limited, and the smallest js file of jquery is about K, many mobile Internet pages will abandon jquery. Given such a condition, I wrote the corresponding js with the native javascript (this js only has 3 K of data ). There is a location requirement to reference this js file. You must first line of the </body> label; otherwise, rolling loading cannot be implemented.

Js: Go to www.manyjar.com and search for myscrollLoading to download the file.

Or directly download this link: http://www.manyjar.com/download? StoreName = m/myscrollLoading. js

(The manyjar website provides a huge amount of jar file downloads. java learners or developer engineers should be very practical. We recommend you read more)

In HTML code, the format of the imported file is as follows:

<Script type = "text/javascript" src = "js/scrollLoading/myscrollLoading. js"> </script>

</Body>

 

2.4, completed the example of http://www.whyt.net.cn/net/preArticel? Wxusername = o4Yv7t3nof9hS6TYGQhvioCWrt5Q & id = 115

 

This example is particularly friendly in 2G networks!

 

3. Modify html code in the background

Premise: All the code in the project has been implemented. The Administrator writes mobile articles through Rich Text editors such as Baidu editor. So what we need to achieve at this time is to let our front-end code implement the function of the image rolling loading mechanism without adding any work of the administrator?

Idea: When you want to use the rich text editor on the front-end page, modify the html code and display it on the front-end.

Here we use java as an example. Let the program modify the html code. The job we need to do is to simulate the browser kernel, load all html labels as dom elements, and then modify them.

Here we use the jsoup-1.6.1.jar jar package.

Go to www.manyjar.com, search for jsoup, and find the corresponding jar to download.

Or directly download this link: http://www.manyjar.com/download? StoreName = j/jsoup/jsoup-1.6.1.jar.zip

Directly import the code to the project. The implementation code for html code modification is as follows:

　　Public String htmlToLoadingHtml (String html ){

Document doc = Jsoup. parse (html );

Elements links = doc. getElementsByTag ("img ");
For (Element link: links ){

// Add the class = "scrollLoading" attribute
String strClass = link. attr ("class ");
If (strClass = null | strClass. length () = 0 ){
Link. attr ("class", "scrollLoading ");
} Else {
Link. attr ("class", "scrollLoading" + strClass );
}

// Add the data-url attribute with the src value
String strSrc = link. attr ("src ");
// Link. attr ("data-url", strSrc );
Link. attr ("xSrc", strSrc );

// Change the src value to a 1 px * 1px gif transparent image (Small Size)
Link. attr ("src", "images/scrollLoading/pixel.gif ");


// Modify the style attribute
String strStyle = link. attr ("style ");
// If it is a jpg image, set the chrysanthemum image that the background image is waiting for. Otherwise, it is not set.
If (strSrc. contains (". jpg ")){
If (strStyle = null | strStyle. length () = 0 ){
Link. attr ("style", "background: url (images/scrollLoading/loading.gif) no-repeat center ;");
} Else {
Link. attr ("style", "background: url (images/scrollLoading/loading.gif) no-repeat center;" + strStyle );
}
}
}
Html#doc.html ();
Return html;
}

 

 

I wish you a successful completion of this technology! I am the author of the small product www.manyjar.com. We invite you to have a great experience!