图片加载完毕后执行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‘);
        };
    });
});
}
时间: 2024-08-29 14:15:04

图片加载完毕后执行JS代码的相关文章

页面图片加载完毕以后执行JS代码

// 案例列表页左右div等高 $(".case-list-cont img").each(function(idx,ele){ if (ele.complete==true) { var rightAdvHeight = $(".case-list-cont").find(".right-div").height(); var leftAdvHeight = $(".case-list-cont").find(".

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

最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: [javascript] view plaincopyprint? //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{

图片加载完后执行js

<script>            window.onload=function(){                          var liwidth = $('.imgul li img').width();            $('.imgul li img').height(liwidth);        }    </script>

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

有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.鸿运国际娱乐城 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.我们需要更快的方法.Firefox有DOMContentLoaded

DOM加载完毕之后执行js

方法一: $(document).ready(function(){ alert('页面加载完成后,我被加载出来了!') }); 方法二: $(function(){ alert('页面加载完成后,我被加载出来了!') }); 注:‘ 方法二 ’是‘ 方法一 ’的简写! 方法三: window.onload = function(){ alert('页面加载完成后,我被加载出来了!') }; 原文地址:https://www.cnblogs.com/Salicejy/p/10944417.htm

图片加载完后执行事件

var count=0; $append_items.find('img').on('load',function(){ count++; if(count == $append_items.length){ $masonry_box.append($append_items).masonry('appended',$append_items); } });

两种方法实现在HTML页面加载完毕后运行某个js

两种方法实现在HTML页面加载完毕后运行某个js 这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下 js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery

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

通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg" id="test" width="250px"

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

在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是document加载完成后就执行方法. 3:使用jQuery的$(window).load(function(){}); 4:使用window.onload = function(){