So implementieren Sie das verzögerte Laden von Bildern in PHP

So implementieren Sie das verzögerte Laden von Bildern in PHP: Wenn Sie den angegebenen Speicherort für das Laden von Bildern erreichen, ersetzen Sie den src-Attributwert von img durch den data-src-Attributwert, z. B. [imgs[i].src = imgs[i]. getAttribute( 'data-src');].

Wenn Sie den angegebenen Speicherort für das Ladebild erreichen, ersetzen Sie einfach den src-Attributwert von img durch den Attributwert von data-src. Zu diesem Zeitpunkt fordert img Ressourcen an.

(Empfohlenes Tutorial: php-Video-Tutorial)

imgs[i].src = imgs[i].getAttribute('data-src');

Code-Implementierung:

    
    
    
    
    


    
    
    
    
    
    
    
    
    
    
    
    

<script>
        var imgs = document.querySelectorAll(&#39;img&#39;);

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute(&amp;#39;data-src&amp;#39;);
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>

Verwandte Empfehlungen: php-Training

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden von Bildern in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!