前端学习 第七弹: 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(,) 设置并返回元素的某个属性
前端学习 第七弹: Javascript实现图片的延迟加载的更多相关文章
- 前端学习 第六弹: javascript中的函数与闭包
前端学习 第六弹: javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) { ...
- 前端学习 第三弹: JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
- 前端学习 第四弹: HTML(一)
前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...
- 前端学习 第五弹: CSS (一)
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- web前端学习之HTML CSS/javascript之一
前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...
- Web前端学习(4):显示图片、url与文件路径
本章主旨 介绍<img>标签及其基本属性:介绍URL和文件路径 在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1 ...
- webpack学习(七)打包压缩图片
使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置 ...
- web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流
index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript 浏览器对象
1.window对象 1.1.window对象: window对象是BOM的核心,window对象指当前的浏览器窗口 所有javaScript全局对象.函数以及变量均自动生成为window对象的成员 ...
随机推荐
- Qt之Qwt学习之安装
QWT+qtcreator 编译.安装使用 目录:一.Qwt简介 二.QWT编译 一.Qwt简介 QWT:Qt Widgets for Technical Applications,是开源的2D绘图库 ...
- Spring 国际化
http://www.xdemo.org/spring-i18n/ xxxx_zh_CN.properties中不允许保存中文,用jdk/bin目录下的native2ascii.exe将中文转化为Un ...
- Binding ConvererParameter
WPF中ConverterParameter不可以绑定,可以通过如下扩展来实现ConverterParameter的Binding: 1.自定义ConverterBindableBinding和Mul ...
- WebGL如何解决中文文字载入
关于WebGL载入中文字体问题,我在网上搜了一下,发现例子并不多,而且只能实现隶书的载入,不支持其他中文字体. 下面是实现的代码: <script src="../js/three.m ...
- 通过a++来理解闭包改变作用域的问题
纯属个人理解,如果有误请指出! 让我们先看一段代码 function dog(){ var a=100; a++; return a; } alert(dog()); alert(dog()); 我们 ...
- Eclipse使用指定JDK,无需配置Path变量
修改Eclipse安装目录下的eclipse.ini配置文件 将下面内容添加到文件的首部 -vmF:/Lunatic/IDE/JDK/jdk1.7.0_67/jdk1.7.0_67/bin/javaw ...
- React学习——ListView(Reflux)
接前一篇,把前面的ListView改成Reflux的形式 var BookActions=Reflux.createActions([ 'fetchList' ]); var BookStore = ...
- 第三次作业——for 语句及分支结构else-if
1.本次学习到的知识点: (1)else-if的一般形式:if(表达式1)语句1:else if(表达式2)语句2:........else if(表达式n-1)语句n-1:else语句n: (2)遇 ...
- Eclipse/JavaWeb (三)三大框架之Spring框架 持续更新中...
(一)发展历史 现在我们有三个层了,可是每层之间的调用是怎样的呢?比如显示层的struts需要调用一个业务类,就需要new一个业务类出来,然后使用:业务层需要调用持久层的类,也需要new一个持久层类出 ...
- js版扫雷(可直接运行试玩)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...