图片延迟加载(用jq自己写的方法)
$(function() { $("img.lazy").attr("src","2.jpg"); show(); $(window).scroll(function () { show(); }); function show(){ $("img.lazy").each(function () { var clientH = window.screen.availHeight; var $height = $(this).height(); var $scroll = $(window).scrollTop(); var $off = $(this).offset().top; var $val=$(this).attr("data-original"); if ($off - $scroll < clientH) { $(this).attr("src",$val); } }) } })
注:我写的这个方法,实现的效果是当图片的上边框显示在可视区域内时,把图片的真实路径赋值给src。
如果需要让图片全部显示在可视区域时再换成真实src的话,需要把if判断中的条件换成 $off + $height - $scroll < clientH
首先给需要延迟加载的img标签加个class名lazy,然后把src的路径赋值给data-original,如下所示:
<img class="lazy" data-original="images/xinan_searchLogo.png" alt=""/>
然后引入jq文件,然后再把上边的js代码放上即可
思路:1、首先给所有需要延迟加载的图片,添加一个默认的图片(2.jpg),让页面刚开始加载时只加载一张图片
2、当图片显示在可视区域时,把data-original的值赋给src属性
3、首页刚进入页面时有些图片就显示在可视区域内 所以要首先执行下show方法。然后再让滚轴滚动时再执行show方法
移动端图片延迟加载(css3实现加载转圈图标)
function img_lazyLoad(imgSrc){ var $lazy=$("img.lazy"); //$lazy.attr("src",imgSrc); var str='<div class="loading-circle loading-circle1"></div>'+ '<div class="loading-circle loading-circle2"></div>'+ '<div class="loading-circle loading-circle3"></div>'+ '<div class="loading-circle loading-circle4"></div>'+ '<div class="loading-circle loading-circle5"></div>'+ '<div class="loading-circle loading-circle6"></div>'+ '<div class="loading-circle loading-circle7"></div>'+ '<div class="loading-circle loading-circle8"></div>'+ '<div class="loading-circle loading-circle9"></div>'+ '<div class="loading-circle loading-circle10"></div>'+ '<div class="loading-circle loading-circle11"></div>'+ '<div class="loading-circle loading-circle12"></div>'; $lazy.each(function () { $(this).parent().addClass("loading"); if($(this).parent(".loading").find(".loading-circle").length == 0){ $(this).parent(".loading").append(str); } var clientH = $(window).height(), $height = $(this).height(), $scroll = $(window).scrollTop(), $off = $(this).offset().top, $val=$(this).attr("data-original"); if ($off + $height - $scroll < clientH) { $(this).attr("src",$val).removeClass("lazy"); $(this).load(function(){ $(this).parent().removeClass("loading"); $(this).parent().find(".loading-circle").remove() }) } }) } img_lazyLoad(); $(window).on({ scroll:function(){ img_lazyLoad() } });
.loading{ position:relative; } .loading .loading-circle { margin:-.49rem 0 0 -.49rem; width: .98rem; height: .98rem; position: absolute; left: 50%; top: 50%; } .loading .loading-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; @include border-radius(100%); } .loading .loading-circle2 { transform: rotate(30deg);-webkit-transform: rotate(30deg);} .loading .loading-circle3 { transform: rotate(60deg);-webkit-transform: rotate(60deg);} .loading .loading-circle4 { transform: rotate(90deg);-webkit-transform: rotate(90deg);} .loading .loading-circle5 { transform: rotate(120deg);-webkit-transform: rotate(120deg);} .loading .loading-circle6 { transform: rotate(150deg);-webkit-transform: rotate(150deg);} .loading .loading-circle7 { transform: rotate(180deg);-webkit-transform: rotate(180deg);} .loading .loading-circle8 { transform: rotate(210deg);-webkit-transform: rotate(210deg);} .loading .loading-circle9 { transform: rotate(240deg);-webkit-transform: rotate(240deg);} .loading .loading-circle10 { transform: rotate(270deg);-webkit-transform: rotate(270deg);} .loading .loading-circle11 { transform: rotate(300deg);-webkit-transform: rotate(300deg);} .loading .loading-circle12 { transform: rotate(330deg);-webkit-transform: rotate(330deg);} @-webkit-keyframes loading-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes loading-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } .loading .loading-circle:before { animation: loading-circleFadeDelay 1.2s infinite ease-in-out both; -webkit-animation: loading-circleFadeDelay 1.2s infinite ease-in-out both; } .loading .loading-circle2:before {animation-delay: -1.1s; -webkit-animation-delay: -1.1s; } .loading .loading-circle3:before { animation-delay: -1s;-webkit-animation-delay: -1s;} .loading .loading-circle4:before { animation-delay: -0.9s;-webkit-animation-delay: -0.9s; } .loading .loading-circle5:before { animation-delay: -0.8s;-webkit-animation-delay: -0.8s; } .loading .loading-circle6:before { animation-delay: -0.7s;-webkit-animation-delay: -0.7s; } .loading .loading-circle7:before { animation-delay: -0.6s;-webkit-animation-delay: -0.6s; } .loading .loading-circle8:before { animation-delay: -0.5s;-webkit-animation-delay: -0.5s; } .loading .loading-circle9:before { animation-delay: -0.4s;-webkit-animation-delay: -0.4s; } .loading .loading-circle10:before { animation-delay: -0.3s;-webkit-animation-delay: -0.3s; } .loading .loading-circle11:before { animation-delay: -0.2s;-webkit-animation-delay: -0.2s; } .loading .loading-circle12:before { animation-delay: -0.1s;-webkit-animation-delay: -0.1s; }