Picture implementation scrolling load in HTML page of mobile device

Now the mobile Internet is popular all over the world, moving the elements of the page is also rich and colorful, a mobile page of more than 10 pictures has been a normal thing. But in contrast, many mobile users are still stuck in a network like 2g,3g. So users of such bandwidth, when browsing such a page, to load the page complete, may need to 10s,20s or even more, seriously affect the user experience. For such a problem, it is important to have the picture on the page scroll (the picture appears on the monitor screen and then load the picture). This can also effectively save the bandwidth of our servers and solve the problem of large concurrent requests.

1, the effect chart.

This is the picture that is loaded during the daisy display which is loaded successfully after the picture

2, front-end code implementation

2.1, a normal picture of the HTML code should be as follows:

2.2, the picture into a scrolling load, the image of the HTML code should be like this:

Style= "Background:url (images/scrollloading/loading.gif) no-repeat Center;"

xsrc=http://www.update8.com/web/css3/"http://staticone.whyt.net.cn/net/ueditor/jsp/upload/image/20150502/ 1430545369965005095.jpg "/>

Parameter description:

SRC: This is a 1px * 1px gif transparent picture (small size). SRC address is absolutely not wrong (if the error, the browser appears a red fork symbol.) For this reason, I choose to use a very small picture to replace.

Sytle: This is mainly a daisy-displayed background image, in order to display a daisy load graph in the browser request server picture loading process.

XSRC: This is a custom attribute with the correct address for an IMG image.

2.3, after the HTML loading, to achieve rolling load, but also need to introduce a JS file. Because the mobile Internet bandwidth is very limited, and jquery's smallest js file is about 100K, so many mobile internet pages will discard the use of jquery. Given such a condition, I wrote the corresponding JS with native JavaScript (this JS has only 3 K of the amount of data). Reference to this JS file has a location requirements, to be in the </body> label of the previous line, otherwise can not implement rolling load.

JS Download Address: To www.manyjar.com this site, search myscrollloading, you can find the download of the file.

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

(Manyjar This site provides a very huge number of jar file downloads, Java Learners or developer engineers, should be very practical, recommend that you can see more)

In HTML code, the format for introducing a file is as follows:

<script type= "Text/javascript" src= "Js/scrollloading/myscrollloading.js" ></script>

</body>

2.4, completes the good example http://www.whyt.net.cn/net/preArticel?wxusername=o4Yv7t3nof9hS6TYGQhvioCWrt5Q&id=115

This example is particularly friendly in the 2G network.

3. Edit the HTML code in the background

Premise: The project has been all the code to achieve good, the administrator is through the Baidu editor, such as Rich text editor to write mobile end article. So what we want to achieve at this point is not to increase the admin any work, let our front-end code to achieve this picture scrolling loading mechanism function?

Idea: in front page to take to Rich text editor content, the get the content of the HTML code to modify, and then put to the front to display.

Here we take Java as an example. Let the program modify the HTML code, we have to do is to simulate the browser kernel, the HTML tags are all loaded with DOM elements, and then modify.

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

To www.manyjar.com this site, search Jsoup, find the corresponding jar download.

or download this link directly: Http://www.manyjar.com/download?storeName=j/jsoup/jsoup-1.6.1.jar.zip

Import directly into the project, the implementation code of the 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 class= "scrollloading" property
String strclass=link.attr ("class");
if (Strclass==nullstrclass.length () ==0) {
Link.attr ("Class", "scrollloading");
}else{
Link.attr ("Class", "scrollloading" +strclass);
}

Add Data-url property, value of SRC
String strsrc=link.attr ("src");
Link.attr ("Data-url", STRSRC);
Link.attr ("Xsrc", STRSRC);

Modify the SRC value to a 1px * 1px gif transparent picture (small size)
Link.attr ("src", "images/scrollloading/pixel.gif");


Modify the Style property
String strstyle=link.attr ("style");
If it is a JPG type of picture, set the background map to wait for the daisy chart, otherwise do not set
if (Strsrc.contains (". jpg")) {
if (Strstyle==nullstrstyle.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;
}