前端学习 第七弹: 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. java 抓取网页图片

    import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.Out ...

  2. eap-tls

    eap-tls       文件路径 用途 示例 备注 #gedit /usr/local/etc/raddb/sites-available/default #gedit /usr/local/et ...

  3. 打不开tomcat

    org.xml.sax.SAXParseException; lineNumber: 14; columnNumber: 59; schema_reference.4: 无法读取方案文档 'http: ...

  4. Java 社区论坛 - Sym 1.6.0 发布

    简介 Sym 是一个用 Java 写的现代化的社区论坛,欢迎来体验!(如果你需要搭建一个企业内网论坛,请使用 SymX) 非常详细的 Sym 功能点脑图 Sym 的诞生是有如下几点原因: (正版) 好 ...

  5. shell 随机从数组中抽取三个随机数(#可持续不停抽取)

    #!/bin/bash #b= ]] #do #sleep 1 student=( DPL YPD LT ZZM HY CQW LSJ ybr) a=$[RANDOM%+] c=$[RANDOM%+] ...

  6. opencv+vs2010

    当程序的输出是系统而不是vs2010时 可以使用Ctrl+F5运行 或者使用命令行模式     打开cmd.exe窗口 输入自己工程(项目)所在的盘,比如我放在E盘的,我就输入E:,按回车 输入cd, ...

  7. eclipse创建maven管理Spark的scala

    说明,由于spark是用scala写的.因此,不管是在看源码还是在写spark有关的代码的时候,都最好是用scala.那么作为一个程序员首先是必须要把手中的宝剑给磨砺了.那就是创建好编写scala的代 ...

  8. UITabBarController使用总结

    刚看了几天教程就开始跟着开发了,以前也没学过C,太痛苦了~只能看看大神的博客,自己再总结学习一下了. 1.首先新建一个TabBarViewController继承于UITabBarController ...

  9. Enterprise Architect 学习 之 活动图

    UML中,活动图用来展示活动的顺序.显示了从起始点到终点的工作流,描述了活动图中存在于事件进程的判断路径.活动图可以用来详细阐述某些活动执行中发生并行处理的情况.活动图对业务建模也比较有用,用来详细描 ...

  10. https适配

    http://www.jianshu.com/p/f312a84a944c http://www.2cto.com/kf/201611/570823.html http://www.cnblogs.c ...