jQuery图片懒加载示例（滚动函数再加载）

图片懒加载可以极大的减轻服务器请求的负担，如果没有做这样的操作，一个页面很多图片同时请求，就会渲染慢，影响用户体验！
原理其实很简单，就是滚动条拉下来显示的时候再加载显示出真实的图片，在不显示的区域的图片，一律使用一张很小的loading图片显示即可。当滚动条拉下来的高度加上显示的高度如果大于等于图片距离顶部的高度，也就是说看的到这张图片了，那么就替换真实图片显示。

高度的计算
$(window).height()+$(window).scrollTop()>=$node.offset().top;

图片属性值的替换，将真实的图片路径替换loading图片
$img.attr('src',$img.attr('data-src'));

<!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=gb2312" />
<title>图片懒加载</title>
<style>.container {max-width: 800px;margin: 0 auto;
}
.container:after{content: '懒加载可以缓解服务器的压力';display: block;clear: both;
}
.container img {width: 50%;
}</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head><body>
<div class="container">
<img src="loading.gif" data-src="z.jpg" />
<img src="loading.gif" data-src="1.jpg" />
<img src="loading.gif" data-src="2.jpg" />
<img src="loading.gif" data-src="3.jpg" />
<img src="loading.gif" data-src="fruits.jpg" />
<p style="height:200px"></p>
</div><script type="text/javascript">
showImgs();
$(window).on('scroll',function(){showImgs()});function showImgs(){$('.container img').not('[isLoaded]').each(function(){var $node=$(this)if(isShow($node)){replaceImg($node)}})}
/*
图片可见再加载
窗口的高度加上滚动条滚动过的高度大于等于图片到顶点的距离，就加载真实图片
-300只是为了显示效果用
*/
function isShow($node){return $(window).height()+$(window).scrollTop()-300>=$node.offset().top;}
//替换成真实图片
function replaceImg($img){$img.attr('src',$img.attr('data-src'));$img.attr('isLoaded',true);//标记已加载的图片}
</script>
</body>
</html>

我们可以通过F12的Network，拉动滚动条查看图片加载情况！
其他一些常用的获取页面宽高的js

可视区域的宽： document.body.clientWidthdocument.body.offsetWidth
可视区域的高： document.body.clientHeightdocument.body.offsetHeight整个页面的宽 document.body.scrollWidth
整个页面的高： document.body.scrollHeight滚动条滚掉的高度： document.body.scrollTop
滚动条滚掉的左边： document.body.scrollLeft
如果是<!DOCTYPE html>这样的声明，就需要使用下面这样来获取
document.documentElement.scrollTop
document.documentElement.scrollLeft屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight

jQuery图片懒加载示例（滚动函数再加载）相关推荐

Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
jQuery 图片懒加载的方法以及用$('.lazyImg').each()出错的地方，记录一下~
我高小莫,今天在这里发誓,如果以后能不用jQuery 的我绝不再用,做习惯了前后端分离的项目,再次回到jQuery ,发现异常的恶心~~~~· 不怪谁,怪就怪当初我,选择项目架构的时候为了省力,竟然选 ...
Jquery图片轮播（连续滚动+突出显示）
之前已经写过很多的图片轮播了,但以下这种还真的没想到过实现效果(图片来源于百度,侵权请与本人联系) 主要原理:利用浮动特性和超出部分隐藏,动态改变第一张图的右偏移量,动态改变图片排列,实现轮播利用 ...
一个数加100是完全平方数，再加168又是一个完全平方数
1.说明暴力法都知道,但是如果起始没弄好会忽略-99这个数更优的解法需要好的思路 package mainimport ("fmt""math" )func ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
html字体加载规则,CSS-等待字体加载，然后渲染网页
CSS-等待字体加载,然后渲染网页我正在使用@ font-face将字体嵌入到我的网站中. 首先,文本将作为系统默认值呈现,然后(假定字体文件已加载)正确的字体将在几分之一秒后呈现. 有没有一种方法 ...
js return加分号_JavaScript语句后应该加分号么？
首先,加还是不加,这是一个书写风格问题.而书写风格通常有一些外在的考量,比如团队所建立的规则或习惯.@玉伯的答案就是基于此.我对此基本赞同,不过这其实有点避重就轻,呵呵.另外,即使团队有这样的规则 ...
使用jQuery实现图片懒加载原理
在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下 ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...

jQuery图片懒加载示例（滚动函数再加载）

jQuery图片懒加载示例（滚动函数再加载）相关推荐

最新文章

热门文章