Изображение обновления с новым в том же URL

Question

Изображение обновления с новым в том же URL

Вы не можете вкладывать литералы шаблонов друг в друга, так как обратные метки будут мешать друг другу. Лучше всего абстрагировать d.g.map((entry)=> { ... }) в отдельную функцию, а затем вызвать эту функцию внутри литерала шаблона.

Кроме того, в вашей функции render() вы не возвращаете объединенный массив. Он вернет undefined, и ваши круги никогда не будут добавлены в ваш HTML. Следующий скрипт должен работать:

document.getElementById("gElement").innerHTML = getParsedHtml(d);

    function getParsedHtml(data) {
      return data.g.map(entry => {
        return `
              <g class="${entry.class}" id="${entry.id}">

              <polygon 
                 points ="${entry.polygon.points}">
              </polygon>

              ${render(entry.circle)}

              </g>`;
       }).join('');
    }

    function render(circ) {
      return circ.map(entry => {
        return `
          <circle
              cx="${entry.cx}"
              cy="${entry.cy}"
              r="${entry.r}"
              fill="${entry.fill}">
          </circle>`;
      }).join('');
    }

Я заметил, что у вас есть префикс $ в атрибуте points многоугольника: я полагаю, что это опечатка?

См. Доказательство -принятие примера ниже:

const d = {
  "id": "gElement",
  "g": [{
    "class": "polygon",
    "id": "elements100",
    "polygon": {
      "points": "337,212.00000000000006,352.99999999999994,150,433.99999999999994,147.00000000000006,431,206.00000000000006"
    },
    "circle": [{
        "cx": "337",
        "cy": "212.00000000000006",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "352.99999999999994",
        "cy": "150",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "433.99999999999994",
        "cy": "147.00000000000006",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "431",
        "cy": "206.00000000000006",
        "r": "2",
        "fill": "none"
      }
    ]
  }]
};

document.getElementById("gElement").innerHTML = getParsedHtml(d);

function getParsedHtml(data) {
  return data.g.map(entry => {
    return `
          <g class="${entry.class}" id="${entry.id}">

          <polygon 
             points ="${entry.polygon.points}">
          </polygon>

          ${render(entry.circle)}

          </g>`;
   }).join('');
}

function render(circ) {
  return circ.map(entry => {
    return `
      <circle
          cx="${entry.cx}"
          cy="${entry.cy}"
          r="${entry.r}"
          fill="${entry.fill}">
      </circle>`;
  }).join('');
}

svg {
  border: 1px solid #000;
  width: 250px;
  height: 250px;
}

polygon {
  fill: grey;
}
circle {
  fill: steelblue;
}

<svg viewBox="0 0 500 500">
  <g id="gElement"></g>
</svg>

311

url javascript image refresh

задан AlexMA 30 March 2012 в 03:56

6 ответов

Никакая потребность в new Date().getTime() интриги. Можно обмануть браузер при наличии невидимого фиктивного изображения и использовании jQuery .load (), затем создав новое изображение каждый раз:

<img src="" id="dummy", style="display:none;" />  <!-- dummy img -->
<div id="pic"></div>

<script type="text/javascript">
  var url = whatever;
  // You can repeat the following as often as you like with the same url
  $("#dummy").load(url);
  var image = new Image();
  image.src = url;
  $("#pic").html("").append(image);
</script>

0

ответ дан 23 November 2019 в 01:12

Попробуйте добавить кеш-прерыватель в конце URL-адреса:

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

Это автоматически добавит текущую метку времени при создании изображения, и вместо этого браузер снова будет искать изображение. извлечения одного из кэша.

330

ответ дан 23 November 2019 в 01:12

Попробуйте использовать бесполезную строку запроса, чтобы сделать ее уникальным URL:

function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        number++;
        newImage.src = "http://localhost/image.jpg?" + new Date();
    }

    setTimeout(updateImage, 1000);
}

1

ответ дан 23 November 2019 в 01:12

Один из ответов - хакерское добавление некоторого параметра запроса получения, как было предложено.

Лучший ответ - указать несколько дополнительных параметров в вашем HTTP-заголовке.

Pragma: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Cache-Control: no-cache, must-revalidate

Если указать дату в прошлом, она не будет кэшироваться браузером. Cache-Control был добавлен в HTTP / 1.1, и тег must-revalidate указывает, что прокси-серверы никогда не должны обслуживать старое изображение даже при смягчающих обстоятельствах,

4

ответ дан 23 November 2019 в 01:12

После создания нового образа вы удаляете ли вы старый образ из DOM и заменяете его новым?

Вы можете получать новые изображения при каждом вызове updateImage, но не добавлять их на страницу.

Есть несколько способов сделать это. Что-то вроде этого могло бы сработать.

function updateImage()
{
    var image = document.getElementById("theText");
    if(image.complete) {
        var new_image = new Image();
        //set up the new image
        new_image.id = "theText";
        new_image.src = image.src;           
        // insert new image and remove old
        image.parentNode.insertBefore(new_image,image);
        image.parentNode.removeChild(image);
    }

    setTimeout(updateImage, 1000);
}

После того, как это заработало, если все еще есть проблемы, это, вероятно, проблема кеширования, о которой говорят другие ответы.

6

ответ дан 23 November 2019 в 01:12

Другие вопросы по тегам:

url javascript image refresh

Изображение обновления с новым в том же URL

6 ответов

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