// мне кажется, что ждать полной загрузки страницы тут незачем
document.addEventListener('DOMContentLoaded', () => {
new Slider({
images: ".slider__galary img",
btnPrev: ".btnPrev",
btnNext: ".btnNext",
rate: false
});
});
// хелпер для прослушивания событий
class EventListener {
constructor(ctx, handlers, target) {
this.ctx = ctx;
this.handlers = handlers;
Object.keys(handlers).forEach(event => target.addEventListener(event, this));
}
handleEvent(event) {
const {handlers, ctx} = this;
const {type} = event;
if(typeof handlers[type] !== 'function') return;
handlers[type].call(ctx, event);
}
}
class Slider {
construnctor({images, btnPrev, btnNext, rate, time = 1000}) {
this.images = document.querySelectorAll(images);
this.i = 0;
new EventListener(this, {
click: this.prev
}, document.querySelector(btnPrev));
new EventListener(this, {
click: this.next
}, document.querySelector(btnNext));
if(rate) {
setInterval(() => this.next(), time);
}
}
prev() {
this.images[i].classList.remove("showed");
this.i--;
if(this.i < 0){
this.i = this.images.length - 1;
}
this.images[i].classList.add("showed");
}
next() {
this.images[i].classList.remove("showed");
this.i++;
if(this.i >= this.images.length){
this.i = 0;
}
this.images[i].classList.add("showed");
}
}
const {PassThrough} = require('stream');
const youtubeStream = new PassThrough();
youtubeApi.downloadVideo(
'v=4P1-JwZF0Vo&t=4519s',
chunk => youtubeStream.write(chunk),
() => youtubeStream.end()
);
youtubeStream.pipe(res); // где res - выходной поток к клиенту
// для начала я вынесу массив с разрешениями из функции, чтоб не создавать его для каждого вызова:
var resolutions = ['maxresdefault', 'hqdefault', 'mqdefault'];
function fetch_highest_res(videoid) {
// сама функция будет возвращать промис, полученный сверткой массива resolutions
return resolutions.reduce(
function(promise, resolution) {
// перехватываем только ошибку загрузки, если была успешная загрузка - просто отдаем ее дальше
return promise.catch(function() {
return new Promise(function(resolve, reject) {
var img = new Image();
// повесим таймаут в 3 секунды (если надо, поставьте больше), генерирующий ошибку
setTimeout(reject, 3000);
// отследим ошибку загрузки
img.onerror = reject;
// а в случае успешной загрузки отдадим результат
img.onload = function() {
resolve(resolution);
};
// и только когда навесили обработчики начинаем загрузку
img.src = 'https://i.ytimg.com/vi/' + videoid + '/' + resolution + '.jpg';
});
});
},
// в качестве инициализирующего значения отдаем отклоненный промис
// так как следующая картинка должна пробоваться только если не получилось загрузить предыдущую
// а отслеживать мы это будем по ошибке загрузки
Promise.reject()
// ну и перехватим случай, если ничего не удалось загрузить
).catch(function() { return null; });
}
// ну и функция теперь у нас возвращает асинхронный результат в виде промиса
// поэтому и получать его надо соответствующе
fetch_highest_res('eei-soH5Gx8').then(function(resolution) {
console.log(resolution); // hqdefault
});
function handleClick() {
$('.photo').removeClass('active-element');
$(this).addClass('active-element');
$('.point li').removeClass('active-point').
filter((index, item) => $(this).data('id') == $(item).data('id')).addClass('active-point');
$('.about-text p').text($(this).data('text'));
$('.about-site p').text($(this).data('info'));
$('.about-site a').text($(this).data('website')).attr("href", "#");
}
$('.photo').click(handleClick);
$('.point li').click(function() {
$('.point li').removeClass('active-point');
$(this).addClass('active-point');
handleClick.call(this)
});
Кто нибудь знает бесплатные способы посмотреть свою верстку в Safari, если сижу на винде?Из бесплатных - только воткнуть хакинтош в виртуалку, но нормально работает только на процессорах от intel (и то не на всех), имеющих аппаратную виртуализацию
И стоит ли вообще запариваться по этому поводустоит... сафари на сегодня самый проблемный браузер.
//module.js
import chartModule from '/static/scripts/myScripts/chartModule/myChart.js'; // импортирует функцию для создания графиков
// помещаем chartModule в window, чтоб он был доступен глобально
window.chartModule = chartModule;
const CODE = 'console.log("good");'; // ваш код
(new Function(CODE))(); // создаем из него функцию и сразу вызываем
const CODE = 'console.log("good");'; // ваш код
document.write('<script>' + CODE + '</' + 'script>');
const CODE = 'console.log("good");'; // ваш код
const scriptTag = document.createElement('script');
scriptTag.type = 'application/javascript';
scriptTag.src = URL.createObjectURL(new Blob([CODE]));
document.head.appendChild(scriptTag);
const box = new Vue({data: {groups: []}});
Object.defineProperty(Vue.prototype, '$dataGroups', {
configurable: true,
get() { return box.groups; },
set(value) { box.groups = value; }
});
Vue.mixin({
beforeCreate() {
const {$options} = this;
const {parent} = $options;
if($options.dataGroups) {
const groups = typeof $options.dataGroups === 'function' ? $options.dataGroups() : $options.dataGroups;
const box = new Vue({data: {groups}});
Object.defineProperty(this, '$dataGroups', {
configurable: true,
get() { return box.groups; },
set(value) { box.groups = value; }
});
return;
}
if(!parent) { return; }
const descriptor = Object.getOwnPropertyDescriptor(parent, '$dataGroups');
if(!descriptor) { return; }
Object.defineProperty(this, '$dataGroups', descriptor);
}
});
О ,я как раз собирался уточнить это) Суть в том ,что на сайте есть достаточно много картинок ,и про проверке сайта на скорость загрузки ,мне посоветовало "кэшировать изображения" ,я начитался в интернете ,что можно начать загрузку всех изображений сразу ,до их открытия пользователем ,путем кэширования. Т.е. страницы открылась ,пользователь еще на самом верху ,а изображения в других местах страницы уже грузятся и когда он до них доходит ,они уже загружены ,как то так )
// сделаем функцию, ждущую загрузку основной страницы,
// чтоб не мешать ей при загрузке дополнительных картинок:
function waitWindowLoad() {
if(document.readyState === 'complete') {
return Promise.resolve();
}
return new Promise(resolve => {
const listener = () => {
window.removeEventListener('load', listener);
resolve();
};
window.addEventListener('load', listener);
});
}
// массив url подгружаемых картинок
[
'/images/1.png',
'/images/2.png',
'/images/3.png'
].reduce((promise, url) => promise.then(() => new Promise(resolve => {
// грузим картинки по очереди
const img = new Image();
img.onload = img.onerror = resolve;
img.src = url;
})), waitWindowLoad());