首页>建站相关>Jquery幻灯插件Slidesjs图片宽高异常与引用文件顺序
Jquery幻灯插件Slidesjs图片宽高异常与引用文件顺序
遇到一个困扰多日的问题,在页面中生成了一个幻灯片组件,正常载入的时候是挺正常的,但是偶尔多刷新几次,图片的宽高会出现异常,离谱的是幻灯容器的宽度正常,图片大幅度溢出,而按钮位置无误。
以上的bug描述对解决问题毫无帮助,幻灯容器的宽高是由js根据图片元素页面实际宽高实时写入的,所以第一时间认为是css写法出了问题。各种修改方式不再赘述,反正就是连改了两天,尝试了在任意自适应语句块内都写一段幻灯组件的css语句无果之后,搜到一篇有点相关的文章,描述css通过文件方式载入后在页面读取完毕后产生预期外的动画效果的。大意是说如果直接将css写在页面内不会导致这样的问题,而以文件方式载入,则会导致css在文档未完全布局完毕前被加载,于是文档边布局边触发了transition。(事实上这个问题也一直困扰着博主)
但看完文章脑海里莫名闪过的却是这两个大字:“加载顺序”,查看了页面head部分的文件引用顺序,发现js文件早于css文件被加载,于是调换了一下加载的顺序,先引用css文件,再引用js文件,然后问题就解决了。回顾一下bug的原因,js的过早加载,可能导致了在js读取元素宽度的同时,css正努力的计算各元素的长宽,正碰上js老弟兄过来咨询,就随手抛出了一个还没有算完的结果,于是导致了宽高的异常。
标签: jquery
移动端可扫我直达哦~
推荐阅读
2024-03-23
在博客上放了一个“Fontawesome4.7.0图标一览”的页面,一直觉得功能太过于单一。自己使用当中,遇到合适的图标,往往还需要去获取它的html标签属性。所以就想给这个页面增加一个点击后复制被点击元素标签的功能。获取标签的相关指...
建站相关
jquery
2023-12-21
想要在手机上上访问pc端的一个页面,现在很常见的做法是提供一个二维码,让用户通过手机扫码软件识别后用浏览器打开,这样就实现了页面地址数据的传输。某天做完一个页面后,想在手机上看看效果,一边手动输入页面地址,一边就萌生了为站点添加一个二...
建站相关
jquery
2023-10-23
用习惯了jquery,遇到想要提取页面上多个元素的链接或者图片资料的时候,就想着用jquery来选择。但是很多站点并不引用jquery,所以“$”语法也就失去了效果。这个时候我们可以临时的为页面添加一个外部引用,以便使用jquery语...
建站相关
jquery
2023-09-15
因为在wordpress的后台设置了一个lazyload项,准备实现全站的图片懒加载的开关,因为业务不熟练,写到哪个模块,就重新构建哪个模块的懒加载开关逻辑,这天刚好写到文章缩略图,获取到的缩略图一般是img标签,在js里面直接可以通...
建站相关
jquery
2023-05-10
看别人家的博客,菜单栏下有一条装饰线,会根据鼠标悬停的位置来回滑动,且根据滑动距离长短,有明显的速度变化。一直心向往之,正好在学习wordpress的wp_nav_menu函数,顺便尝试一下实现这个效果。看过张戈博客主题的元素,似乎是...
建站相关
jquery
2023-05-05
想在wordpress中实现一组彩色的标签,网上相关的实现教程很多,这里就不赘述了。之所以考虑用Jquery来实现,是基于服务器性能的考虑。因为博主的服务器是2h1g的低配版本,这个配置相对于访问用户的主机配置,无论是移动端还是电脑端...
建站相关
jquery
2023-05-04
在w3school里查到的jquery获取焦点的方法,当输入框获得焦点时,改变它的背景色:$("input").focus(function(){
$("input").css("...
建站相关
jquery
2023-05-04
尝试了一下在新的主题中使用jquery,绑定点击动作来添加与删除元素的类名,使用下来感觉确实非常方便。虽然随着各种前段框架的流行,jquery的影响力逐渐减退,但对于博主这种菜鸟来说,还是觉得惊为天人。用jquery添加classna...
建站相关
jquery
2023-04-15
准备在主题中引用jquery,所以lazyload插件也准备用jquery的插件,使用上同lazysizes略有不同,默认并不能在成功加载图片之后修改图片的类名。但是lazyload贴心的提供了回调函数,允许我们自由的修改。引用插件字...
建站相关
jquery
2022-12-30
学习slidesjs幻灯插件的时候翻到的这个,比起slidesjs,nivo slider提供了更多的动画效果,更为丰富的自定义选项。当然,对于一个站点来说,丰富的内容才是关键,过度追求华丽的效果,特别对于带宽较小的服务器来说,无异于...
建站相关
jquery
2022-12-25
jQuery UI简介jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,...
建站相关
jquery
2022-12-22
曾经粗浅尝试过swiper,依赖复制粘贴实现过简易的幻灯片效果。因为服务器配置不高,加入幻灯效果后页面读取时间直线上升,所以以服务器配置过低为理由劝退了自己,实际上还是对swiper的一大堆设置产生了畏难心理。接近年底,抽时间学习一下...
建站相关
jquery