前端学习 第七弹: 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. eclipse 导入工程报错Unable to execute dex: Multiple dex files define Landroid/annotation/SuppressLint

    对策: 检查libs 是否有重复加载的.

  2. 初学Scala

    由于项目的需要接触了Scala语言,也花了一些时间来了解和学习Scala,今天对学习的Scala进行一个小的总结. 1.What is Scala? Scala的官方网站上给出的解释是: Scala ...

  3. Python 中的数据结构总结(一)

    Python 中的数据结构 “数据结构”这个词大家肯定都不陌生,高级程序语言有两个核心,一个是算法,另一个就是数据结构.不管是c语言系列中的数组.链表.树和图,还是java中的各种map,随便抽出一个 ...

  4. iOS之数据安全

    一.数据安全 术语----- 密钥:密钥是一种参数, 它是在明文转换为密文, 或将密文转换为明文的算法中输入的参数. 密钥分为对称密钥和非对称密钥(也可以根据用途来分为加密密钥和解密密钥) 明文:没有 ...

  5. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  6. C# OOP 重要部分全解

    如果你有耐心,那就请你慢慢的往下看,肯定有你用的到的地方,请你相信我! 现在你看到的只是其中一部分后面,还有,还没更新出来,待续.... 类对象的定义 类是现实世界或思维世界中的实体在计算机中的反映, ...

  7. 将list转换为datatable的方法

    public static DataTable CopyToDataTable<T>(this IEnumerable<T> array) { var ret = new Da ...

  8. deProto原型设计工具

    现有的原型工具,比如axure rp等等,都或多或少存在一些使用比较复杂的问题.以至于常常属于少数的产品经理的技能型工具. 在业余的时候,自己凭借兴趣开发了这个工具.希望能够以更简便的方法制作一个de ...

  9. 2016-7-15(1)使用gulp构建一个项目

    gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依 靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查 ...

  10. Java随笔一

    1.继承:子类调用超类构造器时,super调用构造器的语句必须是子类构造器的第一条语句: Java没有多继承,但是可以构造实现多个接口的类: 2.多态:Java 中,对象变量是多态的.一个父类变量既可 ...