图片懒加载JS 简约

Js 2019-10-22 11:04:04 评论

链接格式

<noscript><img src="图片地址" class="scrollLoading" data-url="图片地址" referrerpolicy="no-referrer">

DEDE改造方法

在\includearc.archives.class.php里搜索

//设置全局环境变量

下面添加

$this->Fields['body'] = preg_replace('/<img.*?src=[\"|\']([^\"|^\']+)[\"|\'].*?>/i',"<noscript><img src=\"$1\" class=\"scrollLoading\" data-url=\"$1\" referrerpolicy=\"no-referrer\">", $this->Fields['body']);

JS

jQuery调用

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
//tupian
(function(a){a.fn.scrollLoading=function(b){var c={attr:"data-url",container:a(window),callback:a.noop};var d=a.extend({},c,b||{});d.cache=[];a(this).each(function(){var h=this.nodeName.toLowerCase(),g=a(this).attr(d.attr);var i={obj:a(this),tag:h,url:g};d.cache.push(i)});var f=function(g){if(a.isFunction(d.callback)){d.callback.call(g.get(0))}};var e=function(){var g=d.container.height();if(d.container.get(0)===window){contop=a(window).scrollTop()}else{contop=d.container.offset().top}a.each(d.cache,function(m,n){var p=n.obj,j=n.tag,k=n.url,l,h;if(p){l=p.offset().top-contop,h=l+p.height();if((l>=0&&l<g)||(h>0&&h<=g)){if(k){if(j==="img"){f(p.attr("src",k))}else{p.load(k,{},function(){f(p)})}}else{f(p)}n.obj=null}}})};e();d.container.bind("scroll",e)}})(jQuery);
$(".scrollLoading").scrollLoading(); 

评论

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!