图片延时加载原生JS特效广告代码

稿源：互联网 2018-09-20 01:02:42 点击： 18622 撤稿纠错

一些大型网站经常会用到的图片延时加载特效代码，用原生JS编写的一款广告代码，非常实用，可以应用于复杂结构的代码。

以下讨论的是和延时加载原生JS 广告代码相关的图片延时加载原生JS特效广告代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片延时加载原生JS特效广告代码</title>
<style type="text/css"> 
body,div,ul,li{margin:0;padding:0;}
#box{width:770px;margin:0 auto;padding:10px 0 0 10px;background:#f00;overflow:hidden;zoom:1;}
#box li{float:left;width:375px;height:225px;color:#fff;padding:10px 0;display:inline;text-align:center;margin:0 10px 10px 0;background:#000 url(http://www.alixixi.com/skins/ajaxload.gif) 50% 50% no-repeat;}
#box li img.loaded{width:353px;height:225px;vertical-align:middle;}
</style>
</head>
<script type="text/javascript"> 
var fgm = {
 on: function(element, type, handler) {
  return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
 },
 bind: function(object, handler) {
  return function() {
   return handler.apply(object, arguments) 
  }
 },
 pageX: function(element) {
  return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
 },
 pageY: function(element) {
  return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0) 
 },
 hasClass: function(element, className) {
  return new RegExp("(^|\s)" + className + "(\s|$)").test(element.className)
 },
 attr: function(element, attr, value) {
  if(arguments.length == 2) {
   return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
  }
  else if(arguments.length == 3) {
   element.setAttribute(attr, value)
  }
 }
};
//延时加载
function LazyLoad(obj) {
 this.lazy = typeof obj === "string" ? document.getElementById(obj) : obj;
 this.aImg = this.lazy.getElementsByTagName("img");
 this.fnLoad = fgm.bind(this, this.load);
 this.load();
 fgm.on(window, "scroll", this.fnLoad);
 fgm.on(window, "resize", this.fnLoad);
}
LazyLoad.prototype = {
 load: function() {
  var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var iClientHeight = document.documentElement.clientHeight + iScrollTop;
  var i = 0;
  var aParent = [];
  var oParent = null;
  var iTop = 0;
  var iBottom = 0;
  var aNotLoaded = this.loaded(0);
  if(this.loaded(1).length != this.aImg.length) {
   for(i = 0; i < aNotLoaded.length; i++) {
    oParent = aNotLoaded[i].parentElement || aNotLoaded[i].parentNode;
    iTop = fgm.pageY(oParent);
    iBottom = iTop + oParent.offsetHeight;
    if((iTop > iScrollTop && iTop < iClientHeight) || (iBottom > iScrollTop && iBottom < iClientHeight)) {
     aNotLoaded[i].src = fgm.attr(aNotLoaded[i], "data-img") || aNotLoaded[i].src;
     aNotLoaded[i].className = "loaded";
    }
   }
  }
 },
 loaded: function(status) {
  var array = [];
  var i = 0;
  for(i = 0; i < this.aImg.length; i++)
  eval("fgm.hasClass(this.aImg[i], "loaded")" + (!!status ? "&&" : "||") + "array.push(this.aImg[i])");
  return array
 }
};
//应用
fgm.on(window, "load", function () {new LazyLoad("box")});
</script>
<body>
<ul id="box">
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
    <li><img src="http://www.alixixi.com/images/noface.gif" data-img="http://cool.alixixi.com/UploadPic/2018-9/p2018972255727737.jpg" /></li>
</ul>

</body>
</html>

关于图片延时加载原生JS特效广告代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092085102.shtml方便下次再访问哦。

·上一篇： 很简洁的js树状竖型风格导航菜单代码
·下一篇： 用JS实现鼠标点击a链接标签时，在另外一个DIV显示出该内容

图片延时加载原生JS特效广告代码

文章分类LIST >>返回首页

最新游戏

最新新闻