前端学习 第七弹: 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对象的成员 ...
随机推荐
- svn图标不显示的解决方案
最近发现svn图标莫名其妙的不显示,其他操作都正常.在网上搜了一些方法. 解决方法一(失败): 升级最新版本,我的本来就是最新版本 解决方法二(失败): 右键->TortoiseSVN-> ...
- Dapper学习笔记(3)-增、删、改、查
一.建表 在数据库中建立如下三张表: CREATE TABLE [dbo].[T_User] ( , ) PRIMARY KEY NOT NULL, ) NOT NULL, ) NULL, ) NUL ...
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...
- ubuntu下code::blocks+opengl的使用与配置
操作系统:Ubuntu 15.04 gcc version 4.9.2 opengl安装 sudo apt-get install build-essential libgl1-mesa-dev li ...
- Mac下设置系统PATH
1. 进入当前用户的home目录 输入cd ~ 2. 创建.bash_profile 输入touch .bash_profile 3. 编辑.bash_profile文件 输入open -e .bas ...
- 安装R语言扩展包diveRsity-1
今天去了学院的运动会呢-扮熊本熊超开心-写完这篇我补上我的图么么哒 ××××××××××××文末高能预警!!!!!这个包的安装并不是本周的任务!!!!!我真是萌萌哒×××××××××××××× ××× ...
- entity framework 新手入门篇(3)-entity framework实现orderby,count,groupby,like,in,分页等
前面我们已经学习了entityframework的基本的增删改查,今天,我们将在EF中实现一些更加贴近于实际功能的SQL方法. 承接上面的部分,我们有一个叫做House的数据库,其中包含house表和 ...
- C++网络编程之select
select函数决定一个或者多个套接字(socket)的状态,如果需要的话,等待执行异步I/O. int select( __in int nfds, __inout fd_ ...
- 2016 - 2 - 20 ARC知识总结(二 autorelease概念及实现)
首先祝自己生日快乐~23咯~ 一 autorelease的概念 autorelease会像C语言的自动变量那样来对待对象实例.当超出作用域(相当于变量作用域)时,对象的实例release实力方法被调 ...
- Bzoj索引
1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...