Taobao image processing discussion
Taobao's page is very large, but it opens very quickly. The image processing uses scroll loading, which means where the scrolling axis rolls and where the picture is loaded. But if you want to check its source code, it will take a lot of effort, because their code compression and merging are done well! Because the image is loaded in scrolling and the image is not loaded during initialization, then when you refresh the page at the bottom of the page, the bottom page will usually not be loaded. Taobao's approach seems to be (because I didn't look at their source code, just based on operations), refreshing to bring the page back to the top.
Imitate Taobao and do scrolling pictures to load
Here are three ways to think of:
1. JavaScript lazy loading visual area loading
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>harooms front-end blog-visual area loading javascript</title> <style> img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;} </style></head><body> <img haroomslazyload="Chrysanthemum.jpg" src="" > <img haroomslazyload="Desert.jpg" src="" > <img haroomslazyload="Desert.jpg" src="" > <img haroomslazyload="Hydrangeas.jpg" src="" > <img haroomslazyload="Koala.jpg" src="" > <img haroomslazyload="Lighthouse.jpg" src="" > <img haroomslazyload="Penguins.jpg" src="" > <img haroomslazyload="Tulips.jpg" src="" > <script> var imgNum=document.getElementsByTagName('img').length; var imgObj=document.getElementsByTagName("img"); var l=0; window.onscroll=function(){ var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i=l;i<imgNum;i++){ if(imgObj[i].offsetTop < seeHeight + scrollTop){ console.log(imgObj[i].getAttribute("src")); console.log(imgObj[i].src ); if(imgObj[i].getAttribute("src") == ""){ imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload"); } } if(imgObj[i].offsetTop > seeHeight + scrollTop){ l=i; break; } } } }</script>Please pay attention to my two console outputs, console.log(imgObj[i].src); to obtain the entire browser address!
2. jquery lazy loading visual area loading
The above js is translated with jquery!
var l=0//js method translation version $(window).bind("scroll", function(event){ for(var i=l;i<$("img").length;i++){ if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){ if($("img").eq(i).attr("src") == ""){ var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload"); $("img").eq(i).attr("src",lazyloadsrc); } } if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){ l=i; break; } } });3. Visual area loading extension
For example, an animation effect or a canvas image, the effect I want to achieve is that it does not load initially. When scrolling onto the animation or chart, it will be loaded. Then we can make the following improvements based on the above code:
$(window).bind("scroll", function(event){ //The height of the window + the height of the invisible top = the height of the lower part of the screen from the top var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); var thisTop = parseInt($(window).scrollTop()); //The height of the top of the screen from the top var PictureTop = parseInt($(window).offset().top); if (PictureTop >= thisTop && PictureTop <= thisButtomTop) { // $("#Your ID to be scrolled").attr("src", $("#Your ID to be scrolled").attr("haoroomslazyload")); //You can execute your loading function here, and the loading function will be moved from the original document.ready to here! }})Refresh back to top
When we do the visual area loading, we usually let it refresh back to the top. Like Taobao. Refresh back to top.
I don't know how Taobao does it. Refresh back to the top, I used the onbeforeunload event.
Onbeforeunload and onunload events, onunload and onbeforeunload are both called when refreshing or closing. They can be specified in the <script> script through window.onunload or in the <body>. The difference is that onbeforeunload is executed before onunload, it can also prevent the execution of onunload.
Onbeforeunload is also called when the page is refreshed or closed. Onbeforeunload is called when it is about to go to the server to read a new page, but it has not started to read it yet. Onunload has read the new page that needs to be loaded from the server, and is called when the current page is about to be replaced. Onunload cannot prevent page updates and closings. And Onbeforeunload can do it.
1. Only onload is executed when the page is loaded
2. When the page is closed, execute onbeforeunload first, and finally onunload
3. When refreshing the page, first execute onbeforeunload, then onunload, and finally onload.
Refreshing back to the top is to use this event, you can write it like this.
window.onbeforeunload = function(){$(window).scrollTop(0);}When all the pictures on the website are used but the area is loaded, and the css and js are merged and compressed, our website speed and performance will be much improved!
If you want to do it like Taobao, you can improve the code.
In fact, the idea of delayed loading is to put the image in a data-src or a property first. When the page slides into the visual area, assign the stored image address to src.
I won't list the code here.