前端学习 第七弹: 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. JavaScript数据类型

    当说到JavaScript的数据类型时,好多做了很多年web的朋友甚至还不太清楚.这应该算是最基础的js知识了.我觉得有必要在这记录一下,方便自己和大家查看. 最基本的,js有五种数据类型:undef ...

  2. ORACLE删除当前用户下所有的表的方法

    1.如果有删除用户的权限,则可以: drop user user_name cascade; 加了cascade就可以把用户连带的数据全部删掉. 删除后再创建该用户. --创建管理员用户 create ...

  3. java获取日期 昨天 今天 明天的日期

    Date date=new Date();//取时间 Calendar calendar = new GregorianCalendar(); calendar.setTime(date); cale ...

  4. SimpleAdapter的使用

    SimpleAdapter的使用       SimpleAdapter是一个简单的适配器,该适配器也继承了BaseAdapter,对于布局是固定而言,使用简单适配器开发时非常简单了,由于Simple ...

  5. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  6. docker 源码分析 六(基于1.8.2版本),Docker run启动过程

    上一篇大致了解了docker 容器的创建过程,其实主要还是从文件系统的视角分析了创建一个容器时需要得建立 RootFS,建立volumes等步骤:本章来分析一下建立好一个容器后,将这个容器运行起来的过 ...

  7. 从UWP到SWIFT-页面间反向传值

    页面1跳转到页面2,在页面2点击button后,页面1的内容被改变.实际使用 protocol(就是c#中的interface),将页面1的viewcontroller转换为protocol传入页面2 ...

  8. ios创建自定义控件必须具备的三个方法

    1.当用代码创建控件时调用 -(instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { ...

  9. 设置时间&时区

    设置时间之前要先了解一件事,时间分为系统时间与硬件时间 如果硬件时间与系统时间不相同的话,经常会发现自己写的程序时间可能对不上 首先修改硬件时间 1)修改时区 输入命令: tzselect 按照指示选 ...

  10. fatal: Could not read from remote repository.的解决办法

    1. git remote –v查看远端地址或者查看配置 git config –list 2. git status 3. git add . git status git commit -m “本 ...