Beispiel für das Vorladen von JS-Bildern-js-Tutorial-php.cn

Beispiel für das Vorladen von JS-Bildern

一个新手

Freigeben： 2017-10-18 09:48:12

Original

1990 Leute haben es durchsucht

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

Nach dem Login kopieren

Das Prinzip besteht darin, den tatsächlichen Bildpfad in src einzufügen, zuerst das kleine Bild in src zu laden und dann den Inhalt von src beim Scrollen der Seite der entsprechenden Position zuzuweisen zur entsprechenden Quelle.

Der Hauptcode ist „js-Code zum Vorladen von Bildern“. Das anschließende Aufrufen und Übergeben von Parametern ist dasselbe wie bei der Verwendung des JQuery-Plug-Ins, mit der Ausnahme, dass JQuery hier nicht benötigt wird.

Der Effekt ist wie folgt:

1 Wenn keine Vorladung vorhanden ist, müssen 13M geladen werden

2 wird vorab geladen, nur 2,6 Millionen werden geladen

Da viele der Bilder, die ich hier verwende, unter unterschiedlichen Domainnamen stehen, können sie gleichzeitig geladen werden Alle unter demselben Domainnamen, der Effekt wird besser und offensichtlicher sein.

Das obige ist der detaillierte Inhalt vonBeispiel für das Vorladen von JS-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!