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

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

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

AI Summary: 本文介绍了在优化docs模板时引入pjax框架以实现局部刷新，提高网站响应速度。然而，在处理图片时发现手机端显示不清晰，因此需要使用lightbox来放大图片。由于jquery和lightbox之间的冲突，最终选择了非jquery的pjax框架。文章详细说明了如何引入pjax和lightbox，配置局部刷新的DOM元素，以及在完成pjax操作后调用重载图片的方法。通过这些方法，成功解决了图片显示的问题。 --- (From Model:gpt-4o-mini-2024-07-18)

## 前言

给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

© 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