typecho给图片加上灯箱和图片懒加载

admin

撰写于 2023年 05月 16 日

首先在顶部引入JS

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script>

然后把

<?php $this->content(); ?>

改成

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);
    echo $content;
?>

最后在底部
添加

<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

懒加载头部

<script src="https://cdn.staticfile.org/lazyload/2.0.3/lazyload-min.js"></script>

文章内容格式

<img src="loading.gif"  data-src="pic.png">

底部

<script>
var imgs = document.querySelectorAll('img');
function lazyLoad(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var winHeight= window.innerHeight;
        for(var i=0;i < imgs.length;i++){
            if(imgs[i].offsetTop < scrollTop + winHeight ){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
  window.onscroll = lazyLoad;
</script>