- 浏览: 606262 次
- 性别:
- 来自: 杭州,长沙
-
文章分类
- 全部博客 (279)
- Java (30)
- Jsp、Servlet (18)
- Web前端 (56)
- Oracle (31)
- SqlServer (1)
- Jetty (3)
- Tomcat (6)
- Weblogic (11)
- Websphere (2)
- Struts2 (13)
- Spring (5)
- Ibatis (8)
- Hibernate (3)
- Webservice (1)
- C/C++ (2)
- Linux (13)
- Android (1)
- 正则表达式 (3)
- 网络组建 (3)
- 软件工程 (11)
- IDE使用技巧 (20)
- Windows操作技巧 (18)
- 养生之道 (1)
- 杂七杂八 (15)
- 心理保健 (1)
最新评论
-
50854319:
elements[i] = tagArr[i]; 这个需要修改 ...
document.getElementsByName在IE下的bug解决 -
mengsina:
通过楼主的介绍,能够启动client了。但是又遇到了cisco ...
(转)Cisco Systems, Inc. VPN使用过程中常见问题解决方案 -
zzz_robinson:
谢谢,关闭-启动-启动。这个循序对的,否则每次都提示服务没打开 ...
(转)Cisco Systems, Inc. VPN使用过程中常见问题解决方案 -
wuchunjiesp:
总算解决了,THANK楼主,空值问题是TYPE里面参数类型定义 ...
(原创)Ibatis2调用数据库存储过程的相关示例 -
wuchunjiesp:
存储里面是这样的
FOR I IN 1..P_GOODSDI ...
(原创)Ibatis2调用数据库存储过程的相关示例
代码: inputImage方法是把一张图片插入一个Div中: 这种情况用第三节的结论很容易说明:在<script>inputImage("script2", "images/Script2.JPG")</script>处,先执行脚本,加载图片Script2,然后加载在Script2之前的图片Css5(Css5是在外部Css文件中声明的,修饰的是cssContainer1的背景图片,由于后面还有内联的Style,所以这里Css5被IEAbort了)以及Css2,之后执行<script>inputImage("script1", "images/Script1.JPG")</script> 加载图片Script1,然后加载在Script1之前的图片Css3。接下来顺序加载内嵌图片以及背景图片。 FF3.0+Firebug 这里可以看到与IE不同,Firefox是先加载背景图片再加载脚本插入的图片。结合第三节,可以认为Firefox把脚本插入的图片和背景图片作为相同加载顺序权值的图片看待,它们之间的加载顺序按照在页面上出现的先后安排。 但有时在IE下会出现下面的情况: 这是什么原因呢? 第二段代码: 这里onload闪亮登场,看表现: FF3.0+Firebug 很明显,放在onload事件里加载的图片被放在最后才加载,这也很好理解。 IE7+HttpWatch: IE表现出了多样性,不得不认为,对于IE来说,Script标签是个不稳定因素,它的影响是确定的,但影响的结果是不定的……4.下面我们试试用Javascript插入图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试图片加载顺序</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/main.js"></script>
</head>
<body>
<div id="div1">
<img src="images/Div1.jpg" /></div>
<div id="div2">
<img src="images/Div2.jpg" /></div>
<div id="div3">
<img src="images/Div3.jpg" /></div>
<div id="script1">
</div>
<div id="script2">
</div>
<div>
<div id="cssContainer1">
<div id="cssContainer2" style="background-image: url('images/Css2.jpg')">
</div>
<script>inputImage("script2", "images/Script2.JPG")</script>
<div id="cssContainer3">
</div>
<script>inputImage("script1", "images/Script1.JPG")</script>
</div>
<div id="cssContainer4" style="background-image: url('images/Css4.jpg')">
</div>
<div id="div4">
<img src="images/Div4.jpg" /></div>
</div>
<div id="div5">
<img src="images/Div5.jpg" /></div>
<div id="div6">
<img src="images/Div6.jpg" /></div>
<div id="div7">
<img src="images/Div7.jpg" /></div>
<div id="div8">
<img src="images/Div8.jpg" /></div>
<div id="div9">
<img src="images/Div9.jpg" /></div>
<div id="div10">
<img src="images/Div10.jpg" /></div>
<div id="div11">
<img src="images/Div11.jpg" /></div>
<div id="div12">
<img src="images/Div12.jpg" /></div>
<style>
#cssContainer1
{
background-image: url("images/Css1.jpg");
}
</style>
</body>
</html>
function inputImage(divid, imgpath) {
var divImage = document.getElementById(divid);
divImage.innerHTML = '<img src="' + imgpath + '" />';
}
IE7+HttpWatch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试图片加载顺序</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/main.js"></script>
</head>
<body>
<div id="div1">
<img src="images/Div1.jpg" /></div>
<div id="div2">
<img src="images/Div2.jpg" /></div>
<div id="div3">
<img src="images/Div3.jpg" /></div>
<div id="script1">
</div>
<div id="script2">
</div>
<div>
<div id="cssContainer1">
<div id="cssContainer2" style="background-image: url('images/Css2.jpg')">
</div>
<script>inputImage("script2", "images/Script2.JPG")</script>
<div id="cssContainer3">
</div>
</div>
<div id="cssContainer4" style="background-image: url('images/Css4.jpg')">
</div>
<div id="div4">
<img src="images/Div4.jpg" /></div>
</div>
<div id="div5">
<img src="images/Div5.jpg" /></div>
<script>window.onload = function() { inputImage("script1", "images/Script1.JPG"); }</script>
<div id="div6">
<img src="images/Div6.jpg" /></div>
<div id="div7">
<img src="images/Div7.jpg" /></div>
<div id="div8">
<img src="images/Div8.jpg" /></div>
<div id="div9">
<img src="images/Div9.jpg" /></div>
<div id="div10">
<img src="images/Div10.jpg" /></div>
<div id="div11">
<img src="images/Div11.jpg" /></div>
<div id="div12">
<img src="images/Div12.jpg" /></div>
<style>
#cssContainer1
{
background-image: url("images/Css1.jpg");
}
</style>
</body>
</html>
发表评论
-
List of mine types
2010-08-03 18:44 1332List of mine types &qu ... -
document.getElementsByName在IE下的bug解决
2010-06-17 09:23 3777那天封装一个ajax边输入边提示标签,在JS脚本中使用到了do ... -
JS文件中获取contextPath的方法
2010-06-11 15:48 3115function getContextPath() { ... -
javascript获取当前鼠标在屏幕上的会标(转)
2010-06-11 14:35 997<script>function mouseMov ... -
HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响
2010-06-09 13:09 2219在上一节中发现,背景图片似乎还有些需要研究的地方。 代码 ... -
HTML页面元素加载顺序研究报告(3)----Script标签与背景图片(转)
2010-06-09 12:08 23573、看下Javascript对图片加载顺序的影响 采用和 ... -
HTML页面元素加载顺序研究报告(2)----背景图片(转)
2010-06-09 11:39 26612、接下来考察背景图片的加载: 一般来说,添加背景图片有 ... -
HTML页面元素加载顺序研究报告(1)----简单Div罗列(转)
2010-06-09 11:37 1889一直没有意识到HTML页面的元素加载顺序有什么重要性,至多 ... -
提高网站访问速度的34条军规二 (转)
2010-06-09 11:32 94218 预先加载组件 (Preload ... -
提高网站访问速度的34条军规一 (转)
2010-06-09 11:28 13221 减少HTTP请求数量 (Minimize HTTP Req ... -
JavaScript输出中文乱码的解决方法
2010-06-08 16:27 1377当页面中包含的js文件中有中文输出时,在页面中会出现乱码. ... -
javascript动态循环添加行及行中的事件调用带参数的函数
2010-06-03 16:33 1946今天在做一个动态循环添加行,并在新行添加onclick事件,调 ... -
(转)a href=#与 a href=javascript:void(0) 的区别
2010-02-23 15:53 2244<a href="#"> 点击 ... -
树型对象的table展现形式思考
2009-10-20 13:57 1032如图所示:近日项目中需要将一个动态树型结构以表格动态合并行 ... -
Javascript实现web表格宽度拖动(分固定宽度和不固定宽度)
2009-06-30 19:47 2048<html><head><tit ... -
JSeclipse最新的update地址
2009-03-30 10:22 1460http://www.interaktonline.com/P ... -
Javascript窗口与提示大全
2009-03-19 15:40 1138//-----------按钮提示框----------// ... -
web标准:div+css命名规则
2009-03-16 11:41 1182SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很 ... -
四种悬浮DIV提示效果
2009-03-11 09:55 7079<html> <head> <t ... -
javascript中数组去除重复值
2008-09-08 19:44 3409<script> Array.prototyp ...
相关推荐
本篇文章将详细讲解延迟加载在JavaScript(js)和jQuery中的应用,以及如何实现页面和图片的延迟加载。 一、延迟加载的概念 延迟加载,也称为懒加载(Lazy Loading),是指在需要时才加载资源的技术。这种技术主要...
【第八章】JavaScript【Script标签与访问HTML页面(2)】这一主题主要涵盖了JavaScript在网页中的应用,特别是关于`<script>`标签的使用以及如何通过JavaScript来操作和访问HTML页面内容。JavaScript是一种广泛用于Web...
JavaScript在页面加载时的执行顺序是网页开发中的关键概念,对于理解JavaScript如何与HTML交互至关重要。以下是关于这一主题的详细解释: 首先,我们来看在HTML中嵌入JavaScript的几种常见方式: 1. **内联脚本**...
内部使用时,JavaScript代码可以直接写在HTML文件的`<script>`标签中,通常建议将定义的函数放在`<head>`部分,而调用函数的代码放在`<body>`部分,以确保在元素加载完成后执行。例如: ```html <html> <title>My ...
例如,我们可以用JavaScript改变HTML元素的样式,或者在用户点击按钮时加载新的数据。 在达内的这门课程中,学习者可以期待涵盖以下关键知识点: 1. HTML基础:包括基本标签的使用、表格、表单、链接和多媒体元素...
卫班科技---JavaScript自动加载定时器,这个是一个页面加载时。自动执行定时器的JavaScript案例。
通过JavaScript,我们可以监听用户的动作,比如点击按钮,然后执行相应的操作,如改变内容、加载新数据或显示隐藏元素。JavaScript库和框架如jQuery、React、Vue和Angular等,为开发者提供了更高级的功能,例如DOM...
通常,广告服务器会提供一段JavaScript代码,开发者将其插入到网页的HTML中合适的位置,这段代码会在页面加载完成后执行,请求并渲染广告。 2. **广告加载流程** - **请求广告**: 当用户打开页面时,JavaScript...
Pegasus-Javascript库数据加载速度更快
通过学习和研究这些实例,你可以了解到如何使用JavaScript与HTML、CSS协同工作,创建出动态且引人入胜的页面效果。 在实践中,理解并掌握JavaScript的核心概念,如DOM操作、事件处理、定时器、闭包以及异步编程等,...
在JavaScript中,我们可以通过改变元素的`background-image`属性来更改这些图像,或者使用CSS伪元素(如`:before`和`:after`)结合`content`属性插入图标。 在实际开发中,为了代码的可维护性和复用性,JavaScript...
除了上述基本技术,还可能涉及到事件监听(如鼠标点击、滚动等)、AJAX异步加载图片、响应式设计以适应不同设备屏幕等高级技巧。学习和掌握这些JavaScript图片特效不仅可以提高网页的互动性和美观度,也是提升前端...
多图相册的实现则涉及到图片的动态加载和显示,可能利用JavaScript数组存储图片信息,然后通过遍历数组动态创建并插入图片元素。还可以添加预览功能,让用户在点击缩略图时可以查看大图。 综上所述,"JavaScript多...
通过JavaScript,我们可以找到页面上的特定元素,改变它们的属性,添加新的元素,甚至删除现有元素。例如,使用`document.getElementById()`可以获取ID为特定值的元素,`element.innerHTML`可以更改元素内的HTML内容...
4. **图片预加载**:`loading.gif`可能是一个预加载指示器,用于在页面主要内容加载之前显示,以告知用户页面正在加载。预加载可以使用JavaScript实现,预先请求图片或其他资源,以便在用户实际交互时能快速显示。 ...
NULL 博文链接:https://android-zhang.iteye.com/blog/1659943
总结起来,"聂微东-页面滚动图片加载"是一个关于利用JavaScript在网页中实现延迟加载图片的技术,这种技术提高了网页性能,优化了用户体验,特别是在内容丰富的网站如QQ空间中。通过监听滚动事件、计算元素位置和...
6. JavaScript性能优化:如避免阻塞渲染的脚本插入方法,合理使用闭包,减少全局变量等。 7. JavaScript库与框架:可能会介绍jQuery和其他流行库,以及React、Vue、Angular等前端框架的基本用法。 通过这本书的...
- 动态文本:JavaScript可以动态改变HTML页面上的文本内容,例如通过`document.write()`函数将变量插入到HTML元素中。 - 网页特效:JavaScript能够实现各种视觉效果,如滑动菜单、动画等,提升用户体验。 - 事件...
在本项目中,“用dreamweaver做的个人主页(html\javascript)”是一个使用Adobe Dreamweaver创建的个人网站示例,主要包含HTML和JavaScript技术。Dreamweaver是一款强大的网页设计工具,它支持直观的可视化编辑和代码...