搜索到
102
篇与
的结果
-
网页图片加载错误的处理 在网站中，经常会遇到一种情况，很多图片要么因为图片地址本身指向一个未知地址（404地址），要么因为图片服务器自身的原因未能给img返回正确的图片文件流，就会导致图片错误或者alt信息，如果没有给相应的img设置宽高，甚至还会影响整个页面的布局，针对以上问题，我们可以采用监听图片的error事件然后做相应的处理。如：<img src="图片地址" onerror="this.src='替换图片地址'"/>按正常逻辑，上面的处理不会有问题，但是容易忽略一种情况，那就是替换的图片地址如果也不存在，那onerror里面的代码就会反反复复地执行，直到请求到图片为止，如果一直请求不到，那就相当于一个死循环了。对此，对以上代码添加一行代码this.onerror=none;在执行完第一次图片替换后，取消图片的error事件监听。上面的代码如果用jquery实现就是下面这样$("img").each(function (index,ele) { $(ele).one("error",function () { $(this).attr("src","替换图片地址"); }) });用one绑定的事件只会执行一次，所以不会出现死循环的情况 -
swiper使用技巧（一） Swiper是一个非常好用的轮播插件，满足各种各样的使用条件和环境，响应式，多列，多行，等等，但是，很多时候还是会有一些条件下Swiper提供的API并不能直接帮我们解决问题，但是都可以通过变通的方式处理。今天要分享的就是关于swiper的左右切换按钮，分页导航的显示或者隐藏的问题。有些时候，我们的需求是这样的，1，当swiper没有多页的时候，左右按钮不出现，2，多于一页的时候，左右按钮出现，但是不能向前或者向后时，左右按钮会有不能点击的状态。swiper在初始化的时候会为不能点击的左右按钮加上‘swiper-button-disabled’这个class，我们可以用css为这个class添加相应的样式，如果要隐藏，可以直接隐藏掉，但是这样做的话，当左右按钮只有一个是disabled状态时，就会出现一边有一边没有的情况。解决这个问题的方法是，我们在swiper初始化后获得swiper对象，然后获取swiper.isBeginning和swiper.isEnd属性，然后判断如果这两个属性同时为true那就表示，swiper在同一时间，既不能向前slide也不能向后slide了，那就说明没有超过一页，然后我们就可以执行我们想执行的逻辑了。当然，如果你的swiper不是根据屏幕大小调整显示的数量的响应式的，那就不用这个麻烦，直接判断slide的个数就行了，需要注意的是，这种方法判断时，一定要在浏览器窗口大小改变时，手动触发swiper的update事件，然后再获取isBeginning和isEnd属性，这样获取到的才会是swiper响应式地调整了数量之后的结果。gridSwiper.update(); let $gridSwiperCheck = this.$('.swiper-container-horizontal .home-todo-check'); if (gridSwiper.isBeginning === gridSwiper.isEnd) { $gridSwiperCheck.hide(); } else { $gridSwiperCheck.show(); }
