前端学习 第七弹: Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载
为了实现图片进入视野范围才开始加载首先:
<img src="" x-src="/acsascasc.jpg">
这时src是空的没有加载图片
$(window).scroll(function (){
$("img").each(function(){
if ($(this).src == ""){
if ( ($(this).offset().top + $(this).width()/2)<($(window).height()+$(window).scrollTop() ) ){
$(this).attr("src",$(this).attr("x-src"));
}
}
});
});
$().attr(,) 设置并返回元素的某个属性
前端学习 第七弹: Javascript实现图片的延迟加载的更多相关文章
- 前端学习 第六弹: javascript中的函数与闭包
前端学习 第六弹: javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) { ...
- 前端学习 第三弹: JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
- 前端学习 第四弹: HTML(一)
前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...
- 前端学习 第五弹: CSS (一)
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- web前端学习之HTML CSS/javascript之一
前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...
- Web前端学习(4):显示图片、url与文件路径
本章主旨 介绍<img>标签及其基本属性:介绍URL和文件路径 在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1 ...
- webpack学习(七)打包压缩图片
使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置 ...
- web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流
index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript 浏览器对象
1.window对象 1.1.window对象: window对象是BOM的核心,window对象指当前的浏览器窗口 所有javaScript全局对象.函数以及变量均自动生成为window对象的成员 ...
随机推荐
- 重叠I/O模型
一. 重叠I/O的概念当调用ReadFile和WriteFile时,如果最后一个参数lpOverlapped设置为NULL,那么线程就阻塞在这里,直到读写完指定的数据后,它们才返回.这样在读写大文件的 ...
- 【转】MyEclipse开发Web项目发布到Tomcat下的Root目录
通常情况下,Web项目是发布到Tomcat下的webapps文件目录下的 .以至于我们访问的时候: 例如:Web应用项目名称为:webManager,则部署到tomcat后,是部署在tomcat/we ...
- How to address this problem?
root# cmake .. No problem. root# make [ 63%] Linking CXX shared module collisionperceptor.so/usr/bin ...
- 2014年6月份第4周51Aspx源码发布详情
通用医院会员管理系统源码 2014-6-23 [VS2010]功能介绍:本系统共包括以下模块:会员开卡管理.会员充值管理.会员消费管理.会员病例管理.客户预约管理.系统信息管理(门诊管理.卡类型管理 ...
- 可滑动的ExpandableListView
可以向左滑动的扩展列表 向左滑动源码是参照GitHub上的里的 ListView的思路写出来的,按照他的思路,由于本人水平有限,只写了关键代码,能够完美运行,adapter改变之后能自动收回. 滑出状 ...
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- entity framework 新手入门篇(2)-entity framework基本的增删改查
经过前两节的简单描述,终于可以进入entity framework的使用部分了.本节将对entity framework原生的增删改查进行讲解. 承接上面的部分,我们有一个叫做House的数据库,其中 ...
- Linux内核分析学习总结
20135125陈智威 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 这学期开 ...
- java开发模式学习
1.瀑布模式 这种模式适合小项目,一层层进行编码,没有规模的设计, 2.原型模式 先做模板给客户在做实体 3.面向对象模式 用面向对象的思想进行开发 4.螺旋模式 从内到外一层层开,
- compare
icompareble 默认的比较器 list.sort() compareto icompare Keyvaluepair<k,p>Where k:new()