$("#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代码的更多相关文章

  1. 在css加载完毕后执行后续代码

    最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui ...

  2. 图片加载完后执行js

    <script>            window.onload=function(){                          var liwidth = $('.imgul ...

  3. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  4. 如何实现加载DOM时执行js代码

    有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 大家可以使用windows.onload事件, ...

  5. 两种方法实现在HTML页面加载完毕后运行JS

    JS默认方法: <script type=”text/javascript”> window.onload=function (){ /*代码区域*/ } </script> ...

  6. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  7. js中页面加载完成后执行的几种方法及执行顺序

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  8. js 图片加载完后的处理事件

    //图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...

  9. jquery循环延迟加载,用于在图片加载完成后再加载js

    <html> <head> <script type="text/javascript" src="http://lib.sinaapp.c ...

随机推荐

  1. Java8 Lambda代码备份

    简单研究了一下,贴出来,相当于笔记 import java.lang.reflect.*; import java.util.ArrayList; import java.util.List; imp ...

  2. SqlServer和Oracle判断表和列是否存在

    SqlServer .判断表Users是否存在 if object_id(N'Users',N'U') is not null print '存在' else print '不存在' .判断表User ...

  3. 3.2 x86体系结构

    计算机组成 3 指令系统体系结构 3.2 x86体系结构 X86是商业上最为成功,影响力最大的一种体系结构.但从技术的角度看,它又存在着很多的问题,那我们就来一起分析X86这种体系结构的特点. 要探讨 ...

  4. devilbox(二):连接数据库

    Devilbox的安装在上一篇https://www.cnblogs.com/ermao0423/p/9505653.html中已经记录了,这篇主要记录各种数据库的连接.用户建立.设置密码等 查看do ...

  5. CSS单位分析

    px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在位置. vm:1 ...

  6. 绝对干货!!css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  7. C#XML注释

    注释 <c>                             将说明中的文本标记为代码 <code>                       提供了一种将多行指示为 ...

  8. 获取当前目录getcwd,设置工作目录chdir,获取目录信息

    #include <unistd.h> #include <stdio.h> #include <limits.h> int main(int argc, char ...

  9. spring cloud 学习(二)关于 Eureka 的学习笔记

    关于 Eureka 的学习笔记 个人博客地址 : https://zggdczfr.cn/ ,欢迎光临~ 前言 Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Sprin ...

  10. 如何获取显示器的EDID信息

    Q1: 为什么要写这篇文章? A1:在最近的工作中遇到了不少问题,其中很多都是和EDID相关的.可以说,作为一家以“显示”为生的企业,我们时时刻刻在与EDID打交道.EDID这东西很简单,但是如果不了 ...