【前端开发】lightbox+pjax最佳实践 密级: 【C-1】 | 时间:2023-11-18 | 目录:编程开发 | 编辑本文 文章距今已发表三个月,请自行判断文中技术方法、代码的有效性:) ## 前言 给docs模板做优化的时候考虑到了局部刷新的功能,这样能够让网站响应速度更快。于是引入了jquery-pjax这个框架,使用方法也很简单。 后面给图片做处理的时候发现这样的问题,图片PC上显示的还行,但是手机端由于被css进行百分比缩放导致看不清,需要用lightbox这样的方法去放大图片。 但是两个方法一起用的时候发生jquery的冲突,我本来就不是一个前端很厉害的人,也不想花时间在这上面去解决dom使用冲突的问题。所以干脆就换了个方案,使用非jquery的pjax前端框架。 ## 最佳实践 ### PJAX引入 引入pjax文件 ``` ``` pjax实现: ```javascript $(function() { var pjax = new Pjax({ selectors: [ "title", "meta[name=description]", ".the-header", ".the-content", ".the-sidebar", "#article", ] }) $(document).on("pjax:send", function() { $("#article").hide(); $("#article").fadeTo(200,0.0); }); $(document).on("pjax:complete", function() { init(); $("#article").fadeTo(300,1); $("#article").show(); anchorContent(); makeimg(); }); }); ``` SELECTORS中写需要局部刷新的dom元素,两个方法分别设置加载的效果和重载js方法。 备份一下jquery-pjax的方法: ``` // $(function() { // $(document).pjax("a[target!=_blank]", "#article", {fragment:"#article", timeout:6000}); // $(document).on("pjax:send", function() { // $("#article").hide(); // $("#article").fadeTo(200,0.0); // }); // $(document).on("pjax:complete", function() { // init(); // $("#article").fadeTo(300,1); // $("#article").show(); // anchorContent(); // }); // }); ``` ### LightBox引入 ```text ``` jquery方法: ```javascript function makeimg(){ var articleElement = document.getElementById('article'); var imgTags = articleElement.getElementsByTagName('img'); for (var i = 0; i < imgTags.length; i++) { var imgTag = imgTags[i]; var aTag = document.createElement('a'); aTag.className = 'example-image-link'; aTag.href = imgTag.src; aTag.setAttribute('data-lightbox', 'example-set'); var newImgTag = document.createElement('img'); newImgTag.src = imgTag.src; aTag.appendChild(newImgTag); imgTag.parentNode.replaceChild(aTag, imgTag); } } ``` 只需要修改article为你文章内容的id即可,然后记得在pjax中配置回调函数makeimg()在complete后调用即可。 本站完美解决此问题 评论列表 写评论 您的IP:13.59.26.145,临时用户名:570e5b47评论已接入DepyWAF审计与流量系统,请勿频繁操作导致IP拉黑 提交评论 © 版权声明:非标注『转载』情况下本文为原创文章,版权归 Depy's docs 所有,转载请联系博主获得授权。