页面加载时执行js代码的2种方式与差别

需求:

在页面加载时用jquery设置jquery图片轮播插件的第一个图片为active状态。

方法1:

在html上加入js代码

<script>
window.onload = function(){
    $(".carousel-inner.one").children().first().addClass("active");
    $(".carousel-inner.two").children().first().addClass("active");
    $(".carousel-inner.three").children().first().addClass("active");
}
</script>

但是在页面加载时会有明显的闪动效果,即页面先加载完成然后才生效,明显的卡顿渲染感。

方法2:

在html上加js代码

<script>
$(function(){
    $(".carousel-inner.one").children().first().addClass("active");
    $(".carousel-inner.two").children().first().addClass("active");
    $(".carousel-inner.three").children().first().addClass("active");
});
</script>

页面加载时没有任何卡顿渲染效果,用户体验佳。

原因就在于使用jquery的$(ready)函数是在页面加载时就渲染的,而window.onload是在页面加载完成后才渲染。

发布了62 篇原创文章 · 获赞 14 · 访问量 22万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览