JS图片预加载实例-js教程-PHP中文网

JS图片预加载实例

一个新手

发布： 2017-10-18 09:48:12

原创

1792人浏览过

<!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" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img01.sogoucdn.com/app/a/100540002/422283.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/08/09/357253.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img01.sogoucdn.com/app/a/100540002/422289.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/05/29/1184364.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/01/27/1063571.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2014/07/16/733793.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2014/11/11/957398.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img.bizhi.sogou.com/images/2013/09/22/387997.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://img.bizhi.sogou.com/images/2015/04/28/1159147.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2015/06/01/1186941.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/07/19/348659.jpg" alt="JS图片预加载实例" >
        <img  src="https://h5.quanchepin.com/templates/images/loadImg.png" data-src="http://dl.bizhi.sogou.com/images/2013/07/19/348291.jpg" alt="JS图片预加载实例" >
    </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