【前端开发】lightbox+pjax最佳实践

Security Classification: 【C-1】 | Publish Time:2024-09-26 | Category:Coding | Edit | Comment

Expiry Notice: The article was published three months ago. Please independently assess the validity of the technical methods and code mentioned within. :)

AI Info

AI Point: 85
AI Summary: 本文介绍了在网页开发中如何结合使用 PJAX 和 Lightbox 技术，以优化页面加载速度和提升移动端图片查看体验。作者通过引入非 jQuery 的 PJAX 框架，解决了与 Lightbox 的 jQuery 冲突问题，并提供了详细的实现步骤和代码示例。
AI Evaluation: 本文内容详实，逻辑清晰，提供了具体的代码实现和解决方案，对前端开发者在处理类似问题时具有较高的参考价值。唯一不足在于部分代码注释未完全移除，略显冗余。整体而言，是一篇实用性强、指导性明确的技术文章。

## 前言

给docs模板做优化的时候考虑到了局部刷新的功能，这样能够让网站响应速度更快。于是引入了jquery-pjax这个框架，使用方法也很简单。

后面给图片做处理的时候发现这样的问题，图片PC上显示的还行，但是手机端由于被css进行百分比缩放导致看不清，需要用lightbox这样的方法去放大图片。

但是两个方法一起用的时候发生jquery的冲突，我本来就不是一个前端很厉害的人，也不想花时间在这上面去解决dom使用冲突的问题。所以干脆就换了个方案，使用非jquery的pjax前端框架。

## 最佳实践

### PJAX引入

引入pjax文件
```
<script src="https://rce.ink/theme/docs/js/pjax.min.js"></script>
```
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
<script src="https://rce.ink/theme/docs/js/lightbox-plus-jquery.min.js"> </script>
 <link href="https://rce.ink/theme/docs/css/lightbox.css?v=123" rel="stylesheet">
```

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后调用即可。

本站完美解决此问题

Comment List

Comment

AI助手回复

内容添加 @depybot 可召唤AI机器人回复。此操作将自动公开评论内容,如涉及敏感信息请勿使用,如有需要请联系站长删除

© Copyright: This article is an original work and the copyright belongs to the Depy's docs unless marked as Reproduced

Please contact the blogger for authorization to reprint

【前端开发】lightbox+pjax最佳实践

© Copyright: This article is an original work and the copyright belongs to the Depy's docs unless marked as ReproducedPlease contact the blogger for authorization to reprint

© Copyright: This article is an original work and the copyright belongs to the Depy's docs unless marked as Reproduced

Please contact the blogger for authorization to reprint