图片预加载2017-10-17&l"/> 图片预加载2017-10-17&l">
recherche

Maison >interface Web >js tutoriel >Exemple de préchargement d'image JS

Exemple de préchargement d'image JS

一个新手
一个新手original
2017-10-18 09:48:122026parcourir


<!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>

Le principe est de mettre le chemin réel de l'image dans src, de charger d'abord la petite image dans src, puis d'attribuer le contenu de src à la position correspondante lorsque la page défile à la position correspondante.

Le code principal est "code js de préchargement d'image", puis appeler et transmettre des paramètres revient à utiliser le plug-in jquery, sauf que jquery n'est pas nécessaire ici.

L'effet est le suivant :

1 Lorsqu'il n'y a pas de préchargement, 13 M doivent être chargés

2. est en cours de préchargement, juste d'abord Chargement 2,6M

Étant donné que la plupart des images que j'utilise ici sont sous des noms de domaine différents, elles peuvent être chargées en même temps si les images le sont. le tout sous le même nom de domaine, l'effet sera meilleur et plus évident.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction aux informations sur les attributs userAgent des principaux navigateurs (PC, mobile)Article suivant：Introduction aux informations sur les attributs userAgent des principaux navigateurs (PC, mobile)

Articles Liés

Voir plus