前端学习 第七弹: 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. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

    错误原因在于出现相同内容. 原写为: <li ng-repeat="log in logs" scroll-down> {{log}}</li> 改写为: ...

  2. ubuntu 16.04 搭建无线共享热点(PC 无线直连Android移动终端 调试,监控屏幕)

    由于android终端usb接口比较松,公司的无线网络使用人过多比较慢,所以想使用PC端无线直连 调试Android终端 配置无线共享 1 网卡要支持 2 安装 plasma-nm sudo apt- ...

  3. ubuntu 搭建maven库 2.14.2-01并配置离线索引文件

    前提 安装JDK版本1.8或者以上 1 下载 http://www.sonatype.org/nexus/archived/  选择相应的版本 2 复制到/usr/local 下解压 sudo cp ...

  4. Python开发入门与实战14-基于Extjs的界面

    14. 基于Extjs的界面 上一章我们实现了一个原生的html例子,本章我们将采用Extjs实现界面的展现,来说明MVC模式下我们是怎么考虑界面与业务层的关系的. 14.1. 引用Extjs目录 首 ...

  5. rem ,em ,px的区别

    参考网址:http://www.cnblogs.com/leejersey/p/3662612.html

  6. 批处理——putCMAC小版本

    @ECHO off del telcc.vbs del telcc.bat del ftp1.txt del ftp1.bat @echo off setlocal enabledelayedexpa ...

  7. C#利用摄像头拍照功能实现

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. 向通知栏发送通知点击跳转并传递数据(PendingIntent)传递数据

    // 为发送通知的按钮的点击事件定义事件处理方法 public void send() {///// 第一步:获取NotificationManager NotificationManager nm ...

  9. HTTP消息结构

    HTTP 消息结构 HTTP是基于客户端/服务端(C/S)的架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议. 一个HTTP"客户端"是一个应用程序(Web浏览 ...

  10. Struts 2 Spring Hibernate三大框架的执行流程以及原理

    Struts2框架 一.简介 Struts2是一个相当强大的Java Web开源框架,是一个基于POJO的Action的MVC Web框架.它基于当年的WebWork和XWork框架,继承其优点,同时 ...