亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

從swiper輪播圖插件失靈的問題來解析瀏覽器渲染機制

標簽:
Html/CSS

最近做了个有关swiper插件的项目,出现了如下问题:


webp


如图,需求是点击a页面的banner图,然后在a页面展现出一个轮播图,想的是挺简单的,但做出来就是不行,一开始的思路是:先把a页面切好,然后将点击banner图展现出来的页面先用display:none隐藏掉,当点击时,即display:block。
怎么调试,也找不到原因,然后就把轮播图这个页面分离了出来,完美运行,屡试不爽。
经过查阅资料后,发现应该与display:none有关,这涉及到浏览器的渲染机制

  • 解析HTML —> 构建DOM树

  • 加载样式 —> 解析样式 —> 构建样式规则树

  • 加载javascript —> 执行javascript代码

  • 把DOM树和样式规则树匹配构建渲染树

  • 计算元素位置进行布局

  • 绘制


    webp


    解析:把DOM树和样式规则树匹配构建渲染树时,只会把可见元素和它对应的样式规则结合一起产出到渲染树,这就意味有不可见元素,当匹配DOM树和样式规则树时,若发现一个元素的对应的样式规则上有display:none,浏览器会认为该元素是不可见的,因此不会把该元素产出到渲染树上。
    经上所述,可以意识到是在swiper实例化的时候,此元素没有渲染,所以出了问题。
    解决方案(奇淫巧技):
    加了一个类名,类名css 样式如下

.hidden{  visibility: hidden;  position: fixed;  z-index: -99999999999999;
}

当点击banner图的时候,再加上.display类名

.display{  visibility: visible;  position: fixed;  z-index: 99999999999999;
}

这样能同样能达到隐藏显示的效果
最后效果为:


webp

             



作者:李佳明同学
链接:https://www.jianshu.com/p/c726d610ea73


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消