Обновление содержимого страницы поверх старой - возможно ли?
Существуют ли какие-то способы запретить браузеру удалять старый фон и прорисовывать очередную страницу поверх предыдущей, аналогично как в gif-анимации?
Страница периодически обновляется на экране второго монитора, пока я редактирую её содержимое на основном, чтобы лишний раз не переключаться между окнами и сосредоточиться на вёрстке: <meta http-equiv=refresh content='3'> Проблема в том, что из 20 раз перезагрузки в минуту страница 12-17 раз отображается пустой, так как изображение образца не успевает загрузиться:
<style>
body {
background-image:url('draft.png');
}
</style>
То есть, только в 3-8 случаях из 20 в минуту мерцание пустой страницы не наблюдается и виден образец с моими элементами поверх чисто… Пробовал делать и так:
<html style="background-image:url('draft.png');" xmlns="http://www.w3.org/1999/xhtml">
Но и это не помогает…Можно ли каким-то образом запретить браузеру вообще обновлять своё окно до полной загрузки ресурсов? Спасибо! |
Live edit для бедных )) Извините.
Скачайте лучше live edit плагин для своей среды разработки. Ну ил обновляйте страницу так:
<body onload="setTimeout('location.reload();',3e3);">
|
Цитата:
Пользуюсь NotePad++ и заранее в графическом редакторе нарисовал интерфейс, чтобы средствами HTML-CSS-JS его воспроизвести алгоритмически. Но проблема как раз не в том, что мерцают динамически генерируемые элементы, а мерцает сам фон, даже если выбросить все скрипты и оставить пустой «<body></body>»: Браузер очищает окно, но не успевает загрузить фон! Например:
<html>
<head>
<meta http-equiv=refresh content='3'>
<style>
body {
background-image: url(\'https://javascript.ru/forum/images/ca_serenity/misc/logo.gif\');
}
</style>
</head>
<body>
</body>
И здесь Live Edit совсем не помогает, так как матрица из сотни элементов визуально была нарисована и сохранена в картинку. И она - мерцает! Всё равно, что логотип этого форума я сейчас буду пытаться генерировать алгоритмом в canvas: Мерцает именно логотип-оригинал постоянно в пустой странице… Спасибо! |
Попробуйте сохранить картинку как data:url и подключить её во внешнем css-файле. Прорисовка страницы должна блокироваться пока внешний css не загрузится и не распарсится - авось поможет.
|
А, ещё попробуйте не релоад, а location.href на ту же самую страницу.
|
Предлагаю использовать упаковщик для этих целей
https://parceljs.org/getting_started.html правда нужен nodejs ) из коробки умеет делать HMR (hot-module-replacement) - т.е. поправил файл, а он автоматически в браузере обновится... для javascript, html, css работает. |
Цитата:
Правда этот css весит почти 300кб, но страница теперь не мерцает и можно продолжать разработку…:write: Просто я думал, может есть более элегантные решения…:-? Спасибо! |
Цитата:
|
Проектирую клавиатуру…
Цитата:
Вот, кстати, что я делаю…
<html>
<head>
<meta http-equiv=refresh content='3000' />
<script>
CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) {
if(typeof stroke == "undefined")
stroke = true;
if(typeof radius === "undefined")
radius = 5;
if(typeof radius === "number")
radius = {tl: radius, tr: radius, br: radius, bl: radius};
else {
var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
for(var side in defaultRadius) {
radius[side] = radius[side] || defaultRadius[side];
}
}
this.beginPath();
this.moveTo(x + radius.tl, y);
this.lineTo(x + width - radius.tr, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
this.lineTo(x + width, y + height - radius.br);
this.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
this.lineTo(x + radius.bl, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
this.lineTo(x, y + radius.tl);
this.quadraticCurveTo(x, y, x + radius.tl, y);
this.closePath();
if(fill)
this.fill();
if(stroke)
this.stroke();
}
//////////////////////////////////////////////////////////////////////////////
var aButtons= [
"~ `Ё ! 11 ¡ @\" 2 2 #№ 3 3 $;£4 ¤ % 5 € ^ :6 ¼ &? 7 ½ * 8₽¾ ( 9 ‘ ) 0 ’ _ …- ¥ + ÷= × |\\¦\\/¬",
"Q Й W Ц E У R К® Tѐ Е Y Н U Г I Ш O Щ P З { [Х« } ]Ъ»",
"A Ф S Ы D В F А G П H Р J О K Л L Д : °;Ж¶ \" ¨'Э´",
"Z Я X Ч C С© V М Bѝ И N Т M Ь < ,Б > .Ю ?. /,¿"
];
//////////////////////////////////////////////////////////////////////////////
var hButton = null;
var hCanvas = null;
var hCtx = null;
function DrawButton(mark, x, y) {
var size = 124.7;
var thick = 12.5;
var border = 3.5;
var radius = 3.05;
var back = 1.75;
var h, l, m, r, v, w;
hCtx.fillStyle = "rgb(90, 90, 90)";
hCtx.beginPath();
hCtx.moveTo(x + size - back, y + back);
hCtx.lineTo(x + back, y + back);
hCtx.lineTo(x + back, y + size - back);
hCtx.closePath();
hCtx.fill();
hCtx.fillStyle = "rgb(31, 31, 31)";
hCtx.beginPath();
hCtx.moveTo(x + size - back, y + back);
hCtx.lineTo(x + size - back, y + size - back);
hCtx.lineTo(x + back, y + size - back);
hCtx.closePath();
hCtx.fill();
hCtx.fillStyle = "rgb(68, 68, 68)";
hCtx.strokeStyle = "rgb(7, 7, 7)";
hCtx.lineWidth = border;
hCtx.roundRect(x, y, size, size, radius * radius, false, true);
hCtx.roundRect(x + thick, y + thick, size - 2 * thick, size - 2 * thick, radius, true, false);
if(typeof mark == "string") {
hCtx.font = "46px helvetica";
h = parseInt(hCtx.font, 10);
hCtx.fillStyle = "white";
hCtx.fillText(mark, x + (size - hCtx.measureText(mark).width) / 2, y + (size / 2 + h / 2));
} else {
v = border + thick;
w = (size - border - thick);
m = x + size / 2;
l = m - w / 3.69;
r = m + w / 2.9;
hCtx.fillStyle = "white";
hCtx.font = "46px helvetica";
h = parseInt(hCtx.font, 10);
s = mark[3]; hCtx.fillText(s, l - hCtx.measureText(s).width / 2, y + size / 2 + h / 1.125);
hCtx.font = "40px helvetica";
h = parseInt(hCtx.font, 10);
s = mark[0]; hCtx.fillText(s, l - hCtx.measureText(s).width / 2, y + size / 2 - h / 4);
hCtx.fillStyle = "red";
s = mark[1]; hCtx.fillText(s, m - hCtx.measureText(s).width / 2, y + size / 2 - h / 4);
s = mark[4]; hCtx.fillText(s, m - hCtx.measureText(s).width / 2, y + size / 2 + h / 1);
hCtx.font = "24px helvetica";
hCtx.fillStyle = "dodgerblue";
s = mark[5]; hCtx.fillText(s, r - hCtx.measureText(s).width / 2, y + size / 2 + h / 1);
h = parseInt(hCtx.font, 10);
s = mark[2]; hCtx.fillText(s, r - hCtx.measureText(s).width / 2, y + v + h - h / 4);
}
}
function main() {
hCanvas = document.getElementById("Draft");
hCtx = hCanvas.getContext("2d");
DrawButton("Esc", 56.5, 119);
DrawButton("F1", 340, 118);
var x = 56.5, y = 310.5;
aButtons[0].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
x = 252, y = 444;
aButtons[1].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
x = 315, y = 577.5;
aButtons[2].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
x = 386, y = 711;
aButtons[3].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
}
</script>
<olink rel="stylesheet" href="body.css">
<style>
body
{
background-image:url('http://pluspng.com/img-png/keypad-png-hd-file-bijoy-keyboard-png-3171.png');/*('keyboard-0.png');/*('keyboard_my.svg');*/
background-repeat:no-repeat;
background-position-left:99px;
background-color :black;
padding :0px 0px 0px 0px;
}
</style>
</head>
<body onload='setTimeout(main, 5000)'>
<canvas id=Draft width=2048 height=960></canvas>
</body>
Чтобы руками в графическом редакторе не перемаркировывать, написал скрипт… Тем более, что в исходном изображении заметны свои косяки местами.;) Сейчас проблема в отрисовке клавиши «Enter» сто́ит. Она и нарисована как-то криво…:blink: P.S.: Вообще-то, хочу разработать собственную раскладку… А чтобы Keyboard Layout Creator вслепую не маяться, хочу визуальную интерактивную модель построить алгоритмом, чтобы эстетически оценить её… |
Так вы все размеры вручную подбирали? Но почему так, ведь HTML-элементы зависят друг от друга, почему бы их не использовать? Вот я попробовал, за 35 минут получилось сделать, я не сидел и не подбирал все позиции подряд, оно само расставилось по местам, только вон те кнопки пошире которые, только их пришлось вручную подогнать, это наверное проще, чем у вас, или я не так понял?
<html>
<head>
<style>
body {
background: linear-gradient(135deg, rgba(226,226,226,1), rgba(219,219,219,1) 26%, rgba(203, 204, 207, 1) 64%);
text-align: center;
font-size: 1.25vw;
}
kbd {
background:
radial-gradient(farthest-side at 50% -100%, rgba(0, 0, 0, 0.6), transparent),
radial-gradient(farthest-side at 50% 200%, rgba(255, 255, 255, 0.1), transparent)
#080808;
box-sizing: border-box;
border-radius: 0.25em;
border: 0.05em rgba(255, 255, 255, 0.4) solid;
border-right-color: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0.05em .125em black;
cursor: pointer;
height: 4em;
margin: 0 0.75em 0.75em 0;
position: relative;
overflow: visible;
text-align: center;
transition: all ease-in-out 200ms;
vertical-align: middle;
width: 4em;
color: white;
color: rgba(206, 241, 248, 0.7);
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
font: 1em / 1em Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
}
kbd:active {
border: 0.05em rgba(255, 255, 255, 0.2) solid;
box-shadow: 0 0 0.05em .125em rgba(0, 0, 0, 0.8);
}
kbd:not([data-half]) + kbd[data-half] {
height: 1.9em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: absolute;
z-index: 1;
border-bottom-width: .15em;
}
kbd[data-half] + kbd[data-half] {
height: 1.9em;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 2em;
border-top-width: .15em;
}
kbd span:only-child {
grid-area: 2 / 1 / 3 / span 3;
}
kbd.m span:only-child {
grid-area: 3 / 1 / 4 / span 3;
padding: .25em;
}
kbd span:first-child:nth-last-child(2),
kbd span:first-child:nth-last-child(3)
{
grid-area: 1 / 2;
transform: translateY(50%);
}
kbd span:nth-child(2):last-child,
kbd span:nth-child(2):nth-last-child(2) {
grid-area: 2 / 2;
transform: translateY(50%);
}
kbd span:nth-child(3):last-child {
grid-area: 1 / 3;
}
kbd.m:nth-child(-n + 6) {
text-align: left;
}
kbd.m:nth-last-child(-n + 6) {
text-align: right;
}
kbd.x2 { width: 6em;}
kbd.x3 { width: 7.5em; }
kbd.x4 { width: 10em; }
kbd.x5 { width: 5em; }
kbd.x6 { width: 24em; }
.touch-bar {
border-radius: 0.25em;
background-color: #000;
padding: .5em;
margin: auto;
margin: 0 0.75em 0.75em 0;
display: inline-block;
box-sizing: border-box;
width: 71em;
}
.touch-bar kbd {
margin: 0;
padding: 0em .5em;
background: #333;
border: 0;
height: 2em;
color: white;
display: inline-flex;
justify-content: center;
align-items: center;
}
.touch-bar kbd span {
transform: scale(1.25) !important;
}
.touch-bar[data-list="1"] kbd span:not(:first-child),
.touch-bar[data-list="2"] kbd span:not(:last-child)
{
display: none;
}
</style>
</head>
<body>
<section class="touch-bar" data-list="1" onclick="this.dataset.list = (+this.dataset.list) % 2 + 1">
<kbd>[😀][esc]</kbd>
<kbd>[😁][F1]</kbd>
<kbd>[😂][F2]</kbd>
<kbd>[🐱][F3]</kbd>
<kbd>[😹][F4]</kbd>
<kbd>[😎][F5]</kbd>
<kbd>[❤️][F6]</kbd>
<kbd>[💩][F7]</kbd>
<kbd>[🤷][F8]</kbd>
<kbd>[🔥][F9]</kbd>
<kbd>[🤔][F10]</kbd>
<kbd>[⌛️][F11]</kbd>
<kbd>[🙌][F12]</kbd>
</section>
<section>
<kbd>~`</kbd>
<kbd>!1</kbd>
<kbd>@2"</kbd>
<kbd>#3№</kbd>
<kbd>$4%</kbd>
<kbd>%5:</kbd>
<kbd>^6,</kbd>
<kbd>&7.</kbd>
<kbd>*8;</kbd>
<kbd>(9</kbd>
<kbd>)0</kbd>
<kbd>_-</kbd>
<kbd>+=</kbd>
<kbd class="m x2">[delete]</kbd>
</section>
<section>
<kbd class="m x2">[tab]</kbd>
<kbd>QЙ</kbd>
<kbd>WЦ</kbd>
<kbd>EУ</kbd>
<kbd>RК</kbd>
<kbd>TЕ</kbd>
<kbd>YН</kbd>
<kbd>UГ</kbd>
<kbd>IШ</kbd>
<kbd>OЩ</kbd>
<kbd>PЗ</kbd>
<kbd>{Х[</kbd>
<kbd>}Ъ]</kbd>
<kbd>|Ё\</kbd>
</section>
<section>
<kbd class="m x3">[caps lock]</kbd>
<kbd>AФ</kbd>
<kbd>SЫ</kbd>
<kbd>DВ</kbd>
<kbd>FА</kbd>
<kbd>GП</kbd>
<kbd>HР</kbd>
<kbd>JО</kbd>
<kbd>KЛ</kbd>
<kbd>LД</kbd>
<kbd>:Ж;</kbd>
<kbd>"Э'</kbd>
<kbd class="m x3">[return]</kbd>
</section>
<section>
<kbd class="m x4">[shift]</kbd>
<kbd>ZЯ</kbd>
<kbd>XЧ</kbd>
<kbd>CС</kbd>
<kbd>VМ</kbd>
<kbd>BИ</kbd>
<kbd>NТ</kbd>
<kbd>MЬ</kbd>
<kbd><Б,</kbd>
<kbd>>Ю.</kbd>
<kbd>?/</kbd>
<kbd class="m x4">[shift]</kbd>
</section>
<section>
<kbd class="m">[fn]</kbd>
<kbd class="m">[control]</kbd>
<kbd class="m">[option]</kbd>
<kbd class="m x5">[command]</kbd>
<kbd class="m x6"></kbd>
<kbd class="m x5">[command]</kbd>
<kbd class="m">[option]</kbd>
<kbd>[◀︎]</kbd>
<kbd data-half>[▲︎]</kbd>
<kbd data-half>[▼︎]</kbd>
<kbd>[▶︎]</kbd>
</section>
<script>
for(const kbd of document.querySelectorAll("kbd")) {
kbd
.textContent
.split(/\[([^\]]*)\]|/)
.filter(v => !!v)
.reduce((_, v) => {
const span = document.createElement("span");
span.textContent = v;
kbd.appendChild(span);
}, kbd.textContent = "")
}
</script>
</body>
|
| Часовой пояс GMT +3, время: 01:15. |