Widget:LazyLoadImg

<script> //判断元素是否可见 function IsElemVisible(elem){ var flag=true; //检查自身是否可见 if($(elem).css("display")=='none'){ return false; } //检查其父节点是否可见 $(elem).parentsUntil("#mw-content-text").each(function(){ if($(this).css("display")=='none'){ flag = false; return false; } }); return flag; } //判断元素是否在可视区域内 function IsInVisibleArea(elem){ var elem_top = $(elem).offset().top; if (elem_top >= $(window).scrollTop() && elem_top < ($(window).scrollTop() + $(window).height())) { return true; } return false; }

//重加载 function reLoadImage(imgObj,imgSrc,maxErrorNum){ if(maxErrorNum>0){ imgObj.onerror=function(){ reLoadImage(imgObj,imgSrc,maxErrorNum-1); }; setTimeout(function(){imgObj.src=imgSrc;},500); }else{ imgObj.onerror=null; } }

//加载图片 function LoadImage(elem_div){ var elem_img = new Image(); var elem_a = $(elem_div).children("a").first(); if(!elem_a){return;} var new_href = $(elem_a).attr("href"); if(new_href.indexOf('game.bilibili.com')>-1) { var i = new_href.indexOf('?url='); new_href = new_href.substr(i+5); } elem_img.src = new_href; elem_img.onload = function(){ //图片加载完毕 var elem_temp; $(elem_img).addClass($(elem_div).siblings(".class_info").html()); var link_info = $(elem_div).siblings(".link_info").children("a").first(); //构造待插入的图片元素 if($(link_info).length>0){ //图片链接 var elem_new_a = $(""); elem_new_a.attr('href',$(link_info).attr('href')); $(elem_new_a).append(elem_img); elem_temp = elem_new_a; }else{ elem_temp = $(elem_img); } //删除父节点的所有子节点并替换父节点 var elem_parent = $(elem_div).parent(); $(elem_parent).contents().remove(); $(elem_parent).replaceWith(elem_temp); } //图片加载失败重加载 elem_img.onerror = function(){ reLoadImage(elem_img,elem_a.href,3); } }

//懒加载 function LazyLoadImg(){ $(".lazyImage").each(function(){ if(IsInVisibleArea(this)&&IsElemVisible(this)){ $(this).find(".url_info").each(function(){ if(!$(this).hasClass("loading")){ $(this).addClass("loading"); LoadImage(this); } }) } }); }

function LazyMain(){ setInterval(LazyLoadImg,1000); }

/*if (window.attachEvent) { window.attachEvent("onload", LazyMain); } else if (window.addEventListener) { window.addEventListener("load", LazyMain, false); }*/

RLQ.push(['jquery', () => { //侦听点击事件 $(function(){ if(!window.hasBindLazyLoadImg){ window.hasBindLazyLoadImg = LazyMain(); } }) }]);

</script>