Image preloading

Image preloading is to simulate an Image(new Image()) when the page is actually rendering an Image, and let it go to the server to request the Image path to be loaded. After the request is completed, the path is given to the SRC path of the Image on the real HTML page. Then the new image is deleted. (For example: the new image is like an errand boy and is killed after doing the job. Hahhahah ~~~ ~)

 let realSrc = ele.getAttribute('realSrc');
 let temp = new Image();
 temp.src = realSrc;
 temp.onload = function () {
    ele.src = realSrc;
 }
 temp = null;
Copy the code

Lazy loading of images

Replace the image with a default image before the browser renders the image page, and then replace it with a real image when that image is displayed somewhere on the page

// When the image is half exposed, change the image address to the real address to display the real image, and display the default image at other timesfunction loadImg(ele) {
        if (ele.flag) return;
        letscT = document.documentElement.scrollTop || document.body.scrollTop; // Roll off the heightletwH = winH().h; // The height of a screenlett = offset(ele).t; // The current element's offset to the bodylet h = ele.clientHeight
        if(scT + wH > t + h / 2) {//true;
            // ele.src = '1.jpg'; // Images are preloadedlet temp = new Image();
            temp.src ='1.jpg';
            temp.onload = functionSRC = temp.src; ele.src = temp.src; fadeIn(ele); // Execute image gradient effect temp = null; }}} // Let the image slowly display, that is, control transparencyfunctionFadeIn (ele) {// Set opacity from 0 to 1; //you are the shadow to my lift ele.style.opacity = 0;let n = 0;
        ele.timer = setInterval(() => {n += 0.01;if (n >= 1) {
                clearInterval(ele.timer);
            }
            ele.style.opacity = n;
        }, 100);
    }
Copy the code

Small demo: Waterfall flow

Thought:

1, to get the data encapsulated into a function, to achieve to get the data of 2, rendering the data operation Data obtained from the background to the display page, according to the columns to display, circulation background to an array, then put together, every piece of data is added to the minimum length of the column Here enclosed a gain length minimum getM column methodinLi converts the set of elements into an array, and then sorts by clientHeight to find the lowest Li; 3. Scroll to load more data. When the bottom of the li with the smallest length is exposed, we load new data. LoadMore request multiple times at a time we make a flag judgment; This parameter is available only when flag isfalseTo execute the request for new data. When the request starts, we set flag totrueRender successfully let's reset flag tofalse; 4, plus the image lazy loading operation; LoadImg loadAll is when the image has not appeared in the visual window, we do not load the image, only when the image is exposed to load the real image preloading is when the image is to be displayed as a real image, first use the default image display, then use JS to create a temporary image, Let this temporary picture remotely request the real picture, and when the request is successful, assign the address of the real picture to the img tag on the page. 5.Copy the code

Code implementation

Github.com/polikesen12…