JS 이미지 사전 로딩 예시-JS 튜토리얼-php.cn

JS 이미지 사전 로딩 예시

一个新手

풀어 주다： 2017-10-18 09:48:12

원래의

1977명이 탐색했습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>图片预加载2017-10-17</title>
    <style type="text/css">
        *{padding: 0;margin: 0}
        img{width: 100%;display: block;}
    </style>
</head>
<body>
    <div>
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="https://a-ssl.duitang.com/uploads/item/201210/24/20121024113044_vkmru.jpeg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img01.sogoucdn.com/app/a/100540002/422283.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/08/09/357253.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img01.sogoucdn.com/app/a/100540002/422289.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/05/29/1184364.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/01/27/1063571.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2014/07/16/733793.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2014/11/11/957398.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img.bizhi.sogou.com/images/2013/09/22/387997.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img.bizhi.sogou.com/images/2015/04/28/1159147.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/06/01/1186941.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/07/19/348659.jpg">
        <img src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/07/19/348291.jpg">
    </div>
<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script type="text/javascript">
    // 图片加载js代码
    window.Echo=(function(window,document,undefined){&#39;use strict&#39;;var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute(&#39;data-src&#39;);store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll(&#39;[data-src]&#39;);var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener(&#39;scroll&#39;,_throttle,false);}else{window.attachEvent(&#39;onscroll&#39;,_throttle);}};return{init:init,render:_throttle};})(window,document);

    Echo.init({
        offset: 100,//离可视区域多少像素的图片可以被加载
        throttle: 0,//图片延时多少毫秒加载
        els: &#39;.jsLoadImg&#39;,
        elP: &#39;.lazy-img&#39;,
        dataSrc: &#39;data-src&#39;
    });
</script>
</body>
</html>

로그인 후 복사

원칙은 실제 이미지 경로를 src에 넣고 작은 이미지를 src에 먼저 로드한 후 페이지가 해당 위치로 스크롤되면 src의 내용을 src에 할당하는 것입니다.

주요 코드는 "js 코드를 미리 로드하는 이미지"이며, 여기에서는 jquery가 필요하지 않다는 점을 제외하면 jquery 플러그인을 사용하는 것과 마찬가지로 매개변수를 호출하고 전달합니다.

효과는 다음과 같습니다.

1. 사전 로드가 없는 경우 13M을 로드해야 합니다.