Как работает конвейер Rails с SVG со специальными шрифтами в них [дубликат]

Js - однопоточная.

Браузер можно разделить на три части:

1) Event Loop

2 ) Web API

3) Очередь событий

Событие Loop запускается вечно, т. Е. Тип бесконечного цикла. Очередь ожидания - это то, где вся ваша функция нажимается на какое-либо событие (пример: нажмите) this один за другим выполняется в очереди и помещается в цикл «Событие», который выполняет эту функцию и подготавливает ее для следующего после первого запуска. Это означает, что выполнение одной функции не начинается до тех пор, пока функция, перед которой она в очереди не будет выполнена цикл событий.

Теперь давайте подумаем, что мы поставили две функции в очереди, чтобы получить данные с сервера, а другой использует эти данные. Мы сначала нажали функцию serverRequest () в очереди, а затем применили функцию Data () , Функция serverRequest переходит в цикл событий и делает вызов на сервер, так как мы никогда не знаем, сколько времени потребуется для получения данных с сервера, поэтому ожидается, что этот процесс займет много времени, и поэтому мы заняли наш цикл событий, тем самым повесив нашу страницу, вот где Web API входит в эту роль, он принимает эту функцию из цикла событий и обращается к серверу, создающему цикл событий, так что мы можем выполнить следующую функцию из очереди. Следующая функция в очереди - useData (), которая идет в цикле, но из-за отсутствия данных отходы и выполнение следующей функции продолжаются до конца очереди (это называется Async-вызовом, то есть мы можем сделать что-то еще, пока не получим данные)

Предположим, что наша функция serverRequest () имела оператор возврата в код, когда мы возвращаем данные с сервера Web API, будет выталкивать его в очередь в конце очереди. По мере того, как он заканчивается в очереди, мы не можем использовать его данные, поскольку в нашей очереди нет функции, чтобы использовать эти данные. Таким образом, невозможно вернуть что-то из Async Call.

Таким образом, решение этой проблемы callback или обещают .

A Изображение из одного из ответов здесь, правильно объясняет использование обратного вызова ... Мы (функция, использующая данные, возвращаемые с сервера), чтобы вызвать вызывающий сервер.

 function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}

В моем коде он называется

function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}

Прочитайте здесь новые методы в ECMA (2016/17) для создания асинхронного вызова (@Felix Kling Answer сверху) https://stackoverflow.com/a/14220323/7579856

5
задан Fabien Snauwaert 16 July 2014 в 19:02
поделиться

1 ответ

Вы используете SVG в контексте изображения. То есть либо с помощью тега html <img>, тега SVG <image>, либо в вашем случае в качестве фонового изображения.

В Firefox (и, вероятно, в других UA в какой-то момент) изображения должны состоять только из одного файла. Любые данные, внешние по отношению к файлу изображения (pattern-google.svg), игнорируются. Если вы показываете SVG напрямую, тогда загружаются / используются внешние данные.

Итак, что вы можете сделать ...

Загрузите данные как URI данных , То есть base64 encode http://fonts.googleapis.com/css?family=Indie+Flower , но прочитайте последний абзац перед тем, как это сделать, а затем вставьте эти данные непосредственно в файл svg.

Таким образом, импорт будет выглядеть так:

@import url('data:text/css;base64,whatever the base 64 encoded data looks like...')

Будьте осторожны, потому что http://fonts.googleapis.com/css?family=Indie+Flower имеет внешние данные, поэтому сами данные сами должны кодироваться как URI данных. То есть вы должны пройти весь путь вниз по кроличьей дыре. И измените этот файл, как я набросал ниже.

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(**convert this file to a data URI too before you convert the whole file to a data URI**) format('woff');
}

После этого вы можете закодировать весь файл как URI данных и @import его.

Итак, чтобы повторить шаг за шагом ...

  1. Convert http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff к URI данных
  2. Заменить http://fonts.googleapis.com/css?family=Indie+Flower с версией, которая имеет URI данных с шага 1
  3. Преобразовать файл на шаге 2 в URI данных
  4. @import URI данных с шага 3

В Интернете есть много сайтов, которые будут создать URI данных.

7
ответ дан Robert Longson 25 August 2018 в 23:50
поделиться
Другие вопросы по тегам:

Похожие вопросы: