图片加载完毕后执行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 ...
随机推荐
- python-GUI,生成ssn
第一次做这个, 样子有点丑,主要是实现功能,做测试的时候,经常要用到身份证号.手机号.姓名等,这里先生成ssn,后续研究怎么做成客户端 代码: from tkinter import * from u ...
- 牛客练习赛22-C-dp+bitset
链接:https://www.nowcoder.com/acm/contest/132/C来源:牛客网 题目描述 一共有 n个数,第 i 个数是 xi xi 可以取 [li , ri] 中任意的一个 ...
- 最小生成树 - 普里姆 - 边稠密 - O(N ^ 2)
#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #define N 1005 #def ...
- POJ服务器不能启动问题
问题1: 启动tomcat时出现错误:tomcat Address already in use: JVM_Bind:80 按照网上的方法,查找占用80端口的进程:netstat -ano 任务管理器 ...
- Intel DAAL AI加速——支持从数据预处理到模型预测,数据源必须使用DAAL的底层封装库
数据源加速见官方文档(必须使用DAAL自己的库): Data Management Numeric Tables Tensors Data Sources Data Dictionaries Data ...
- module_param和module_param_array用法
如何向模块传递参数? Linux kernel 提供了一个简单的框架.利用module_param和module_param_arra来实现. 1. module_param(name, type, ...
- 我的一起开源网 www.17ky.net上线了
.net开源生态的落后,使得.net开发人员所拥有的开源资源比其他语言的开发者少了很多,这也使得笔者很早之前就喜欢收集各种开源项目,经常会去逛codeplex,开源中国社区等网站,同时也喜欢在自己或公 ...
- pyqt5 使用 QTimer, QThread, pyqtSignal 实现自动执行,多线程,自定义信号触发。
渣渣用法,请等待我心情好的时候更新. 1.第一个例子 1.1 先看mainwindow.py from PyQt5 import QtCore, QtGui, QtWidgets class Ui_M ...
- 使用Condition配合await()和signal()实现等待/通知
关键字Synchronized与wait()和notify()/notifyAll()结合可以实现“等待/通知”模式, Lock类的子类ReentrantLock也可以实现同样的功能,但需要借助Con ...
- 面试题21:包含min函数的栈
题目:定义栈的数据结构,要求添加一个min函数,能够得到栈的最小元素.要求函数min.push以及pop的时间复杂度都是O(1). 分析:google的一道面试题.我看到这道题目时,第一反应就是每次p ...