前端学习 第七弹: Javascript实现图片的延迟加载

前端学习 第七弹: 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(,)    设置并返回元素的某个属性

时间: 2024-12-11 22:49:22

前端学习 第七弹: Javascript实现图片的延迟加载的相关文章

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

前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {    var tmp = 3;    function bar(y) {        alert(x + y + (++tmp));    }    bar(10);}foo(2) 这时无论怎么运行输出的都是16,但这不是闭包 如果我们返回内部函数,内部function会close-over外部fu

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

前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="mystyle.css" /> 外联 <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40

好程序员web前端学习路线之在JavaScript中使用getters和setter

好程序员web前端学习路线之在JavaScript中使用getters和setter,大多数面向对象的编程语言都存在getter和setter,包括JavaScript.它们是代码构造,可帮助开发人员以安全的方式访问对象的属性.使用getter,您可以从外部代码访问("获取")属性的值,而setter允许您更改("设置")它们的值.我们将向您展示如何在JavaScript中创建getter和setter. JavaScript对象可以具有多个属性和存储的静态数据和动

好程序员前端学习路线分享模拟JavaScript中面向对象技术

好程序员前端学习路线分享模拟JavaScript中面向对象技术,在C#和Java语言中,面向对象是以类的方式实现的,特别是继承这个特性,类的方式继承表现出了强大的功能,而且也易于学习.JavaScript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术.?一.原型对

Web前端学习-第三课JavaScript篇

Q5:解释什么是引用类型?在使用引用类型的时候需要注意什么? 引用类型通常叫做类,也就是说,遇到引用值时,所处理的就是对象,就是公用. 类型:  object类型,应用于应用程序中存储和数据传输(创建object实例:new操作和队象字面量表示法): Array类型,JavaScript数组的每一项都可以保持任何类型的数据,数组大小可以动态调整: 转换方法,所有对象都具有tolocalstring()和tostring(),valueOf()方法,调用tostring()和value()方法会返

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

本章主旨 介绍<img>标签及其基本属性:介绍URL和文件路径 在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1>~<h6>来设置多级标题,用<a>标签及其href属性来设置超链接.而在这章我将介绍如何在网页中显示图片图片,同时也会介绍有关于文件路径的知识. 一.如何在网页中显示图片 HTML文档是纯文本文档,所以图片不能像WORD文档那样直接插到文件中.那么我们该如何在网页上显示图片呢?

Web前端学习-第四课JavaScript篇

Q7:JavaScript有继承吗?请详细描述. (http://jingyan.baidu.com/article/90895e0f975a7b64ec6b0bbd.html) (http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html) (http://www.360doc.com/content/12/1109/11/4082197_246785232.shtml) 有,1.构造继承法 2.原型继承法 3.实例继承法 4.拷

Web前端学习-第七课HTML篇

Q15:HTML5有哪些API?结合文字和代码说明主要API.(P683) requestAnimationFrame(): 早期动画循环(setInterval()): mozRequstAnimation:告诉浏览器某些JavaScript代码将要执行动画.接受一个参数,即在重回屏幕前调用的一个函数,负责改变下一次重绘时的DOM样式. webkitRequestAnimationFrame与meRequestAnimationFrame Page Visibility API Documen

Web前端学习-第五课JavaScript篇

Q9:什么是跨域?什么是JSON?什么是JSONP?解决跨域问题有哪些方法?请结合代码和文字说明. 跨域:因为JavaScript同源策略(一段脚本只能读取来自同一来源的窗口和文档的属性,同一来源指主机名,协议和端口号的组合)的限制,a.com域名下的js无法操作b.com域名下的对象,只要是协议,域名,端口有任何一个不同都被当做是不同的域: Json(JavaScript Object Notation):一种轻量级的数据交换格式.基于ECMAScript的一个子集.采用完全独立于语言的文本格