КостыльРея

Костыльрея — это способ посмотреть целую кучу фотографий в хорошем качестве. С обычного телефона или даже с калькулятора. Сверх гениальная идея ускоренной загрузки https://nasobe.ru/lazy-load.html#KostylReja
Хотелось бы сказать что это как обычная галерея, но это куда быстрее простой галереи. Потому что в “костельреи” применима космическая технология под названием: “сингал пейдж апликейшн”. 

Принцип работы

Работа костыльреи на простом яваскрипте через подключенную XMLHttpRequest и подключение происходит новой страницы с картинками. Так было сделано потому что делать выборку форматов под разные браузеры было бы безумным сумасшествием. Если подгрузка будет осуществляться только того что нужно. Для открытия в том браузере для который используется в настоящее время. Как бы сказал доктор Шелдон Купер: “это гениально во всех 26 измерениях!”.

На js создается массив с html обработанными картинками (изображения вставлены по ссылки в страницы хтмл). Далее XMLHttpRequets открывает каждую картинку из массива и через функцию ТаймАут перегружает изображение. В период нажатия на кнопку «в лево или в право».

Разработка этой простой костыльреи будет оптимальна для всех. Особенно желающих наработать опыт в веб разработки, хоть и не большой. Что и говорит, основной показатель при устройстве на работу: это понимание ООП. В первую очередь для того чтобы было точное представление как накостылять в любую программу частичку: “ойВсё”.

<!-- тут скрпт костельреи -->
                    <script>
                        
                        let i=0;
                        let slideDljaIMG = ['images/working-for-free/5.html','images/working-for-free/6.html','images/working-for-free/images.html', 'images/lol/gorilla-three.html', 'images/working-for-free/1.html','images/working-for-free/2.html','images/working-for-free/3.html','images/working-for-free/4.html'];
                        function ImagesPodmena(){
                           
                            let podimg = new XMLHttpRequest();
                            podimg.open('GET',`${slideDljaIMG[i]}`);
                            podimg.send();
                            podimg.onload = function(){
                                if(podimg.status !=200){
                                    alert(`Ошибка ${pogimg.status}: ${podimg.statusText}`);
                                }else { // если всё прошло гладко, выводим результат
                                // alert(`Готово, получили ${podimg.response.length} байт`); // response -- это ответ сервера
                                responseType ="Text";
                                document.querySelector('#images').innerHTML = this.response;
                                }
                            }
                        }
                        ImagesPodmena();
                    
                    </script>
                    <div id='images'></div>
                    <div class="dis">

                        <div class="left"><=</div> &nbsp&nbsp&nbsp&nbsp&nbsp
                        <div class='right'> => </div>
                       
                    </div>
                    <script>
                       
                        const leftButton = document.querySelector('.left');
                        leftButton.onclick = function(){
                           
                            i-=1;
                            if(i<0){
                                i=([slideDljaIMG].length)-1;
                                setTimeout(ImagesPodmena(),10);
                                console.log([slideDljaIMG].length+'ny vot');
                            }

                            slideDljaIMG[i];
                            setTimeout(ImagesPodmena(),10);
                            console.log(slideDljaIMG.length+'iz i <0');
                            // console.log(slideDljaIMG[i]);
                            
                        }
                        const rigthButton = document.querySelector(".right");
                        rigthButton.onclick = function(){

                            i+=1;
                            if(i>slideDljaIMG.length){
                                i=0;
                                setTimeout(ImagesPodmena(),10);
                                console.log(i+'--------------');
                            }
                            slideDljaIMG[i];
                            setTimeout(ImagesPodmena(),10);
                            console.log('--------------------');
                            console.log(slideDljaIMG[i]);
                            console.log(slideDljaIMG.length);
                            console.log("onclick-right-button");

                        }
                    </script>
                      

                <!-- ЭНД картинки! -->