基于jquery的图片懒加载js
function lazyload(option){
var settings={
defObj:null,
defHeight:
};
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"
})
基于jquery的图片懒加载js的更多相关文章
- 使用jQuery实现图片懒加载原理
原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...
- jQuery的图片懒加载
jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
- 基于javascript实现图片懒加载(亲测有效)
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- jQuery实现图片懒加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片,就显示默认的图片
参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s 下面是没有 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
随机推荐
- jQuery – 8.事件和事件参数
事件 (*)JQuery中的事件绑定:$("#btn").bind("click",function(){}),每次都这么调用太麻烦,所以jQuery可 ...
- Python 与 C# lambda表达式比较
Python里到lambda表达式非常简约, lam =lambda a: a*2 --> lam(3) 6 在某些情况下确实挺好用到.但是相比C#到lambda表达式,还是不够强大(我不是在黑 ...
- 在ubuntu上搭建开发环境8---Ubuntu搭建Android开发环境
需要首先配置好JDK环境 参看:http://www.cnblogs.com/xumenger/p/4460055.html 安装Eclipse 在Android developer的官网上直接下载a ...
- Babelfish(二分查找,字符串的处理略有难度,用sscanf输入)
Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 28581 Accepted: 12326 题目链接: ...
- Could not link against boost_system 解决办法
Could not link against boost_system 解决办法: 先安装 libboost-all-dev ./configure --with-incompatible-bdb - ...
- 攻城狮在路上(壹) Hibernate(九)--- Hibernate的映射类型
Hibernate采用映射类型作为Java类型和SQL类型的桥梁,对应type属性.分为两种:内置映射类型和客户化映射类型.一.内置映射类型: 1.Java基本类型的Hibernate映射类型: Ja ...
- hp,Qlogic,Brocade光纖卡查看方式
查看光纖卡類型 # lspci| grep Fibre 1. NHB棟 光纖卡brocade /sys/class/fc_host 查看光纖卡是否加載,若無,打驅動brocade_adapter_so ...
- 如何在ASP.NET 5中使用ADO.NET
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:ASP.NET 5是一个全新的平台,在这个平台上也带来一些全新的函数库.不过这并非意味 ...
- 老生常谈,正确使用memset
转自:http://blog.csdn.net/my_business/article/details/40537653 前段项目中发现一个问题,程序总是在某个dynamic_cast进行动态转换时出 ...
- APP交互
交互设计基本功!5个值得学习的APP交互方式http://www.uisdc.com/5-interactive-design-worth-learning 移动App交互设计10大趋势–你用到了吗? ...