码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-21 15:20:55      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:

$("#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代码

标签:

原文地址:http://www.cnblogs.com/3body/p/5416844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!