基于jquery的图片懒加载js

在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载.

以下是实现代码(基于jquery):

function lazyload(option){var settings={defObj:null,defHeight:0};settings=$.extend(settings,option||{});var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");var pageTop=function(){return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;};var imgLoad=function(){defObj.each(function(){              if ($(this).offset().top<=pageTop()){var src2=$(this).attr("src2");if (src2){$(this).attr("src",src2).removeAttr("src2");}}});};imgLoad();// 绑定滚动事件$(window).bind("scroll",function(){         imgLoad();});
}lazyload({defObj:"#plist"
})

转载于:https://www.cnblogs.com/ascrat/archive/2010/06/29/1767496.html

基于jquery的图片懒加载js相关推荐

Java对图片懒加载_[Java教程]JQuery实现图片懒加载_星空网
JQuery实现图片懒加载 2018-08-16 0 懒加载的原因: 对于图片过多的场景,为了提高页面的加载速度,降低服务器的负载,增强用户体验,我们对还没出现在视野的图片先不加载,当元素出现在我们视 ...
使用jQuery实现图片懒加载原理
在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下 ...
jquery之图片懒加载（总结）
2019独角兽企业重金招聘Python工程师标准>>> 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮 ...
jquery实现图片懒加载
实现一个懒加载,效果如上所示 HTML <!DOCTYPE html> <html lang="en"><head><meta chars ...
基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
前端学习（1033）:jquery插件-图片懒加载
1下载插件 2html css和js引入 ctrl+h 快速替换必须最后插入
WEB前端实现图片懒加载 echo.js
echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等.其实这并不是最佳的解决方案.下面给大家介绍另一种方法,简单的控制下css,实现l ...
图片太多加载过慢？学学图片懒加载吧
实验介绍我们在浏览图片较多的网页时,有没有想过这些图片是如何成功展示的呢?比如像这样的图片素材网站: 这样的网页拥有成千上万的图片资源,如何优化网页性能成为了开发人员不得不思考的技术问题. 不难发现 ...
jQuery图片懒加载示例（滚动函数再加载）
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...

基于jquery的图片懒加载js

基于jquery的图片懒加载js相关推荐

最新文章

热门文章