我有两个单独的vanilla JS脚本，它们都可以工作，但是当在同一页面上组合时它们会崩溃。它们内嵌在页面HTML中，奇怪的是，只有第二个内联无法工作，而只有第二个内联内的两个能正常工作，而另一个却不能。

我非常确定问题是由于data-src和src引起的，但是我对JS不太满意，所以我在这里寻求帮助，谢谢！

这是我的HTML。...

<div class="gallery">
                <ul>
                    <li class="gallery__item"><a class="gallery__itemLink" href="images/pancake-maker-crepe-machine-with-batter-spreader-wooden-spatula-oil-brush-ladle-p91-17084_image.jpg" data-src="images/pancake-maker-crepe-machine-with-batter-spreader-wooden-spatula-oil-brush-ladle-p91-17084_image.jpg-1.jpg" data-rel="aiLightbox">
                        <img src="images/pancake-maker-crepe-machine-with-batter-spreader-wooden-spatula-oil-brush-ladle-p91-17084_image.jpg-1.jpg" alt="TEST 2" title=" TEST 2" width="263" height="313" class="gallery__itemThumb" />                     </a>
                    </li>
                </ul>
</div>

这是两个JS的

function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getattribute('data-src')) {
imgDefer[i].setattribute('src',imgDefer[i].getattribute('data-src')); 
} } }
window.onload = init;

`--------------end of first script---------------`

window.onload=function(){class Lightbox{constructor({lazyload=!0,counter=!0,arrows=!0,slideSpeed=400,...options}){if(!options.selector){console.error('Please add a valid css selector with the option "selector:"')}else if(typeof options.selector!=='string'){console.error(options.selector,`is not a string but a(n) ${typeof options.selector}`)}else{this.selector=options.selector;this.lazyload=lazyload;this.counter=counter;this.arrows=arrows;this.slideSpeed=slideSpeed;this.links=Array.from(document.querySelectorAll(`a${options.selector}`));this.offsets=[];this.nodes={};this.imageIndex=null;if(this.links.length>0){this.createLightbox();this.createNodes();this.eventListeners(this.links)}else{console.error(`The selector '${this.selector}' did not yield results. Please make sure the selector is applied on an 'a' element.`)}}};goTo=(num,event)=>{const{items,counter,lightboxNode}=this.nodes;if(this.counter){counter.innerHTML=`${num + 1}/${this.links.length}`}
const spinner=`<div class="spinner"></div>`;const img=items[num].querySelector('img');if(this.lazyload){const src=img.getattribute('data-src');items[num].insertAdjacentHTML('beforeend',spinner);img.setattribute('src',src);const imgLoad=new Image();imgLoad.onload=()=>{items[num].classList.add('is-active');items[num].classList.add('is-loaded')}
imgLoad.src=src}else{items[num].classList.add('is-active');items[num].classList.add('is-loaded')}
for(let i=0;i<this.offsets.length;i++){const offset=this.offsets[i]-(num*100);items[i].style.transform=`translateX(${offset}vw)`;if(event){if(event.target.classname==='gallery__itemThumb'){items[i].style.transition=`opacity 0.4s ease`}else{items[i].style.transition=`transform ${this.slideSpeed}ms ease-out`}}}};createNodes=(links)=>{Object.assign(this.nodes,{lightboxNode:document.querySelector('.m-lightbox'),items:Array.from(document.querySelectorAll('.m-lightbox__slide')),next:document.querySelector('.m-lightbox__nextPrev--next'),prev:document.querySelector('.m-lightbox__nextPrev--prev'),close:document.querySelector('.m-lightbox__close'),});Object.assign(this.nodes,{counter:document.querySelector('.m-lightbox__counter'),})};eventListeners=(links)=>{const{lightboxNode,items,next,prev,close}=this.nodes;links.forEach((item,index)=>{item.addEventListener('click',(e)=>{e.preventDefault();lightboxNode.classList.add('is-active');document.body.style.overflow='hidden';this.imageIndex=index;this.goTo(index,e);this.setNav(index)})});next.addEventListener('click',(e)=>{this.goToNext(e)});prev.addEventListener('click',(e)=>{this.goToPrev(e)});close.addEventListener('click',()=>{this.closeBox()});document.onkeydown=(e)=>{switch(e.keyCode){case 37:this.goToPrev(e);break;case 39:this.goToNext(e);break;case 27:this.closeBox();break}};items.forEach((item)=>{new Swipe(item.querySelector('img'),(e,direction)=>{e.preventDefault();switch(direction){case "up":break;case "down":break;case "left":this.goToNext(e);break;case "right":this.goToPrev(e);break}})})};setNav=(index)=>{if(this.arrows){const{next,prev}=this.nodes;if(index<(this.links.length-1)){next.classList.add('is-active')}
if(index>=(this.links.length-1)){next.classList.remove('is-active')}
if(index>0){prev.classList.add('is-active')}
if(index<=0){prev.classList.remove('is-active')}}};goToNext=(e)=>{const{items}=this.nodes;if(this.imageIndex<items.length-1){this.goTo((this.imageIndex+1),e);setTimeout(()=>{items[this.imageIndex-1].classList.remove('is-active')},this.slideSpeed)
this.imageIndex+=1;this.setNav(this.imageIndex)}};goToPrev=(e)=>{const{items}=this.nodes;if(this.imageIndex>0){this.goTo((this.imageIndex-1),e);setTimeout(()=>{items[this.imageIndex+1].classList.remove('is-active')},this.slideSpeed)
this.imageIndex-=1;this.setNav(this.imageIndex)}};closeBox=()=>{const{lightboxNode,items}=this.nodes;lightboxNode.classList.remove('is-active');document.body.style.overflow='auto';setTimeout(()=>{items.forEach(item=>item.classList.remove('is-active'))},this.slideSpeed)};renderImages=(images)=>{const imagesLinks=images.map((item,index)=>{const offset=index*100;this.offsets.push(offset);const imageSrc=item.getattribute('href');return `
                <li class='m-lightbox__slide' style='transform: translateX(${offset}vw)'>
                    ${this.lazyload ? `<img data-src='${imageSrc}'/>` : `<img src='${imageSrc}'/>`}
                </li>
            `});return imagesLinks};createLightbox=()=>{const lightbox=`
            <div class='m-lightbox'>
                <div class='m-lightbox__controls'>
                    <button class='m-lightbox__close'>
                        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                            <path d="M0 0h24v24H0z" fill="none"/>
                        </svg>
                    </button>
                    <button class='m-lightbox__nextPrev m-lightbox__nextPrev--prev'>
                        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 0h24v24H0z" fill="none"/>
                            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                        </svg>
                    </button>
                    <button class='m-lightbox__nextPrev m-lightbox__nextPrev--next'>
                        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
                        </svg>
                    </button>
                </div>
                <ul class='m-lightBox__slider'>
                    ${this.renderImages(this.links).join('')}
                </ul>
                <div class='m-lightbox__counter'>
                </div>
            </div>
        `;document.body.insertAdjacentHTML('beforeend',lightbox)}}
const lb=new Lightbox({selector:'[data-rel="aiLightbox"]',lazyload:!0,arrows:!0,counter:!0,slideSpeed:500,})}