前端学习 第七弹: 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实现图片的延迟加载的更多相关文章

  1. 前端学习 第六弹: javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  2. 前端学习 第三弹: JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  3. 前端学习 第四弹: HTML(一)

    前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...

  4. 前端学习 第五弹: CSS (一)

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  5. web前端学习之HTML CSS/javascript之一

    前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...

  6. Web前端学习(4):显示图片、url与文件路径

    本章主旨 介绍<img>标签及其基本属性:介绍URL和文件路径 在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1 ...

  7. webpack学习(七)打包压缩图片

    使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置 ...

  8. web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  9. web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript 浏览器对象

    1.window对象 1.1.window对象: window对象是BOM的核心,window对象指当前的浏览器窗口 所有javaScript全局对象.函数以及变量均自动生成为window对象的成员 ...

随机推荐

  1. iOS 指定圆角个数

    需要实现的效果很明确,只要左上和右上两个地方圆角,以前都是通过layer 直接设置四个角都变成圆角,然后我就开始了强大的搜索功能 然后我就获得了我想要的东西 技术链接:http://www.xuebu ...

  2. php session的操作

    [设置session数据] <?php session_start(); //初始化 //session文件中可以保存 dobule,integer,bool,array,object $_SE ...

  3. 我的PHP编程环境变迁:notepad -> notepad++ -> Sublime Text2 -> PhpStorm

    10多年前最一开始写PHP程序的时候是用windows自带的notepad,现在想来真的很屌丝. 后来经人推荐换成了notepad++,感觉还是相当不错的(中间还用过一阵子editplus). 比较喜 ...

  4. DataTable转Json字符串(使用Newtonsoft.Json.dll)

    DataTable转Json字符串(使用Newtonsoft.Json.dll) 在需要把DataTable转为Json字符串时,自己手动拼接太麻烦,而且容易出错,费时费力,使用Newtonsoft. ...

  5. 关于.NET 的邮件发送类

    .NET 类库中已经有现成的封好的类库了,只要引用System.Net.Mail命名空间即可实现发邮件的功能 以下是代码 public class SendMail { private string ...

  6. Spark的WorkCount的例子

    之前为了搭建scala开发spark的环境花了几天的时间,终于搞定了,具体可以参考:http://www.cnblogs.com/ljy2013/p/4964201.html   .下面就是用一个示例 ...

  7. Session阻塞 读写锁引发的小问题

      引子     我们来看两个ajax方法,先后的问题,会有什么样的结果? Javascript: $(function () { //第一个 $.ajax({ type: "POST&qu ...

  8. Django实现表单验证、CSRF、cookie和session、缓存、数据库多表操作(双下划綫)

    通常验证用户输入是否合法的话,是前端js和后端共同验证的,这是因为前端js是可以被禁用的,假如被禁用了,那就没法用js实现验证合法与否了,也就是即使用户输入的不合法,但是也没提示,用户也不知道怎么输入 ...

  9. PKU 1006

    数学问题吧,有兴趣的可以研究一下“中国剩余定理” // 1006.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include < ...

  10. SE1-soc入手又有的东西可以玩了

    笔者之前只有DE2-35 和DE2-70 两个板子用,相比之下亮点主要是:配备了DDR3 的存储器,视频处理能处理更高帧频和画幅数了,此外直接有了USB2.0接口,还配有A9 Arm双核芯片,功能一下 ...