图片加载完毕后执行JS代码
$("#img").load(function(){...});
这是jquery提供的一个方法,但是在IE中会有BUG,IE8不支持,IE9以上刷新后也不会执行,只有强制刷新才执行,所以不能使用这个jquery提供的方法
应该使用:
只能通过JS的onload来触发事件,当然触发的事件代码中可以使用jquery代码(但是,IE8也有BUG,普通刷新的时候图片从缓存读入,读入速度比代码更快,导致onload代码不能运行,解决方法看继续往下看)
document.getElementById('topBanner').onload = function() {
var top = $('#nav').offset().top;
$(window).scroll(function() {
var scroll = $(document).scrollTop();
var pos = scroll - top;
if (scroll > top) {
$('#nav').css('top', pos + 12 + 'px');
} else {
$('#nav').css('top', '12px');
};
});
彻底兼容IE8:
//首先声明一个空的Image对象
var img = new Image(); //通过img对象调用onload事件;定义事件处理函数,并不执行(类似于在标签内定义事件)
img.onload = function() {
var top = $('#nav').offset().top;
$(window).scroll(function() {
var scroll = $(document).scrollTop();
var pos = scroll - top;
if (scroll > top) {
$('#nav').css('top', pos + 12 + 'px');
} else {
$('#nav').css('top', '12px');
};
});
} //然后再为img对象赋值src,让这个img对象有具体的指向,才开始执行onload事件。这样就能兼容IE8了
img.src = document.getElementById('topBanner').src; $(window).resize(function() {
top = $('#nav').offset().top;
$(window).scroll(function() {
var scroll = $(document).scrollTop();
var pos = scroll - top;
if (scroll > top) {
$('#nav').css('top', pos + 12 + 'px');
} else {
$('#nav').css('top', '12px');
};
});
});
}
图片加载完毕后执行JS代码的更多相关文章
- 在css加载完毕后执行后续代码
最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui ...
- 图片加载完后执行js
<script> window.onload=function(){ var liwidth = $('.imgul ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- 如何实现加载DOM时执行js代码
有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 大家可以使用windows.onload事件, ...
- 两种方法实现在HTML页面加载完毕后运行JS
JS默认方法: <script type=”text/javascript”> window.onload=function (){ /*代码区域*/ } </script> ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- js中页面加载完成后执行的几种方法及执行顺序
在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...
- js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
- jquery循环延迟加载,用于在图片加载完成后再加载js
<html> <head> <script type="text/javascript" src="http://lib.sinaapp.c ...
随机推荐
- byte[]数组与十六进制字符串与字符串的互相转换 ——转载
https://www.cnblogs.com/lelehellow/p/6369631.html
- 3-11 《Ruby元编程》第4章block块 3-12
第4章代码块blocks 基础知识 作用域:用代码块携带variables through scopes 通过传递block给instance_eval方法来控制作用域. 把block转换为Proc, ...
- android------adb命令 pull或push手机和电脑文件交互
先说一下adb命令配置,如果遇到adb不是内部或外部命令,也不是可运行的程序或批量文件.配置下环境变量 1.adb不是内部或外部命令,也不是可运行的程序或批量文件. 解决办法:在我的电脑-属性-高级计 ...
- Android之设计模式
设计模式的概念 1.基本定义:设计模式(Design pattern)是一套被反复使用的代码设计经验的总结.使用设计模式的目的是为了可重用代码.让代码更容易被他人理解.设计模式是是软件工程的基石脉络, ...
- 删除php数组中的元素
删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: <?php $array = array(0 => "a", 1 => "b&qu ...
- os.mkdir()和os.path.join()的区别
os.path.join("D:\","test.txt")结果是D:\test.txt,并且在我们往里面写东西,然后保存,在这个目录下会生成这个文件,但是如果 ...
- thinkphp导入
1.页面: <div class="container"> <div style=" margin:10px;"> <div cl ...
- hdu 1258
Sum It Up Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- Oracle11g温习-第一章 3、ORACLE逻辑结构
2013年4月27日 星期六 10:27 Oracle逻辑结构的相关数据字典: 记录各个表空间的详细信息. SYS @ prod > select tablespace_name,status ...
- 正向代理到指定泛域名的nginx配置
resolver 8.8.8.8; #必须配置!!!不然无法代理 server { listen default_server; listen [::]: default_server; server ...