Introduction:
Many times when we are writing html pages, when we need to include pictures in the page, we naturally place the pictures directly in <body>with the <img>tag, which is not a problem at all.
But when there are a lot of pictures, the problem comes.Html pages are parsed by the parser and constantly look for the path to the pictures to load them, which are not necessarily all seen by the user by triggering some click-like operation.In this way, some unnecessary pre-loading of pictures will lengthen the loading time of the page and bring a bad user experience.
To solve this performance problem, a better solution is to delay the pre-loading of pictures with js.So what is the specific implementation process?
Let me first put the code I implemented below:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{position:relative;text-decoration: none;list-style: none;} .showpic{position:absolute;height:550px;width:90%;margin-left:80px;background-color: black;} .button-box{position: absolute;margin-top:560px;margin-left: 600px;z-index: 5;} .preload{position: fixed;height: 100%;width:100%;top:0;background-color: white;display: none;} img{position: absolute;margin-left: 30px;margin-top: 3px;} button{height: 30px;width:80px;font-size: 10px;} </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <body> <div class="showpic"> <img src="img/pexels-photo-297814.jpeg" id="img"> </div> <div class="button-box"> <button type="button" value="Previous" data-control="prev" class="button">Previous</button> <button type="button" value="Later" data-control="next" class="button">Later</button> </div> <div class="preload"></div> <script type="text/javascript" src="js/preload.js"></script> </body> </html> $(document).ready(function(){ var imgs = ["img/pexels-photo-297814.jpeg", "img/pexels-photo-465445.jpeg", "img/pexels-photo-619948.jpeg", "img/pexels-photo-620336.jpeg", "img/pexels-photo-885746.jpeg", "img/pexels-photo-886109.jpeg", "img/pexels-photo-888994.jpeg"]; var index = 0, len =imgs.length; $(".button").on("click",function(){ if($(this).data('control')=== "prev"){ index = Math.max(0,--index); }else{ index = Math.min(len-1, index); } $("#img").attr("src",imgs[index]); }); });
In this case, I want to show a picture by clicking a button.Obviously, I just put a picture in the <img>tab of the <div class="showpic">box (to avoid opening the page without anything), and didn't put all the pictures I could show in the box.This will certainly increase the pressure on web browsers to parse html pages.
I put all the search paths for these pictures in the JS code and updated the <img>tag by modifying the src attribute. I also used html's data attribute to customize the type of click button, and determined the change of the picture path by getting this data value in js.
This implementation is more conducive to reducing the pressure on the browser parser during html page parsing.
This article is reproduced in: Ape 2048 Https://www.mk2048.com/blog/blog.php?Id=ijckjaa&title=Think about picture preloading