图片加载完毕后执行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 ...
随机推荐
- 距离为K的节点 All Nodes Distance K in Binary Tree
2018-07-26 17:38:37 问题描述: 问题求解: 解法一. 第一种解法是使用Graph + BFS.换言之,就是将二叉树转化为无向图,然后在无向图中使用BFS进行层次遍历即可. 这种解法 ...
- 为什么HikariCP被号称为性能最好的Java数据库连接池,如何配置使用
转自:https://blog.csdn.net/clementad/article/details/46928621 HiKariCP是数据库连接池的一个后起之秀,号称性能最好,可以完美地PK掉其他 ...
- 女生学java是否真的没有优势
随着女性越来越独立,我们可以看到再以前我们认为不适合女性朋友从事的工作,也出现了越来越多的女生,例如对IT行业也不再跟之前一样畏惧.虽然当下很多人所持的观点依旧是,女生不适合IT行业,但是很多女生已经 ...
- [HEOI2012]采花
第一眼以为是树套树qwq 然而n,m<=1e6 记上一个与i颜色相同的位置为nxt[i] 考虑i和nxt[i]会对那些询问产生贡献. 发现当右端点R>=i时, 左端点只要满足nxt[nxt ...
- POJ-2689 Prime Distance (两重筛素数,区间平移)
Prime Distance Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13961 Accepted: 3725 D ...
- Leetcode 79
//这是我写过最难的递归了...//class Solution { public: bool exist(vector<vector<char>>& board, s ...
- C#图片转换成二进制流并且保存到sql server数据库
注意:我要存储文件二进制流的列的类型是text,不是image类型. 我已经实现了从数据库中读取text类型的二进制流,,现在就是不知道怎么存进去. 我的部分关键代码: StreamReader sr ...
- C/C++中 malloc和new区别
1. malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内存和释放内存. new 是个操作符,和什么"+"," ...
- quartz---(1)
Quartz Quartz是什么? 简单的一些例子 Quartz是什么 简单的认为Quartz是是一个定时器. 1.1. 下载 http://www.quartz-scheduler.org/down ...
- BZOJ1907 树的路径覆盖
ydc题解上写着贪心,后来又说是树形dp...可惜看不懂(顺便骗三连) 其实就是每个叶子开始拉一条链,从下面一路走上来,遇到能把两条链合起来的就合起来就好了. /******************* ...