首页 > 代码库 > 图片延迟加载(lazyload)
图片延迟加载(lazyload)
1.js代码:
<script> var imgs = document.getElementsByTagName(‘img‘); // 获取视口高度与滚动条的偏移量 function lazyload(){ var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; for(var i=0; i<imgs.length; i++) { var x =scrollTop+viewportSize-imgs[i].offsetTop; if(x>0){ imgs[i].src = imgs[i].getAttribute(‘loadpic‘); } } } setInterval(lazyload,1000); </script>
2.jquery代码:
$(document).ready(function(){ // 获取页面视口高度 var viewportHeight = $(window).height(); var lazyload = function() { // 获取窗口滚动条距离 var scrollTop = $(window).scrollTop(); $(‘img‘).each(function(){ // 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度 var x = scrollTop + viewportHeight - $(this).position().top; // 如果大于0 即该元素能被浏览者看到,则将暂存于自定义属性loadpic的值赋值给真正的src if (x > 0) { $(this).attr(‘src‘,$(this).attr(‘loadpic‘)); } }) } // 创建定时器 “实时”计算每个元素的src是否应该被赋值 setInterval(lazyload,100); });
图片延迟加载(lazyload)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。