openlayers3 feature disapear layer style

Question

I'm working on an embedded "GPS". Our embedded browser is qt5.3 webpluging which is rather old but we can't upgrade our qt yet.

The problem is that when we update the marker of current position it sometimes disappear for 10s or more. Here is a link to a working example or the problem: https://jsfiddle.net/6c8negae/3/ . In firefox there is no problem however the image disapear sometimes in our browser.

The style we compute:

var STYLE_ON = new ol.style.Style({
    image: new ol.style.Icon({
        // not the actual arrow we use: ours is 30*30, 1.9kio
        src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
    })
});
var STYLE_OFF = new ol.style.Style({
    image: new ol.style.Icon({
        // actually a grayed image of the STYLE_ON arrow
        src: "http://images.easyfreeclipart.com/1067/double-up-arrow-1067454.jpg"
    })
});

How we select the style:

map.addLayer(new ol.layer.Vector({
    type: 'markers',
    source: markers,
    style: function (feature) {
        var style = null;
        if (feature.get('vtype') === 'cur') {
            style = feature.get('fade') ? STYLE_OFF : STYLE_ON;
            style.getImage().setRotation(feature.get('rotation'));
        }
        else {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    opacity: 0.5,
                    fill: new ol.style.Fill({
                        color: COLORS[feature.get('vtype')]
                    })
                })
            });
        }
        return [style];
    }
}));

Are there any workaround? It don't look more efficient to have one style per feature (as of our original code was that way).

Answer 1

Try a base64 encoded image:

  var iconStyle = new ol.style.Style({
      image: new ol.style.Icon({
      src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANRJREFUeNrsksERgyAQRfdTQS7pI3YQS0kJHlJFiggdpARboITcc7GELDObDCrIqnBKdoaB0c97sApaUS+63Xk68WiPdB00e6AEH3h68DjLI6eVQAnv5eRhqSTYCFdLsAOukmAnPCtBAfiiBIXgSQkKwqMSFIbPJKgAH0lMJTgJszdiSpXvY7fwvpNM8haG+3ThhU3A28wBnGRiEuvZ/gYUkQzykVyuD5KZSqwwyQTBj0QNT0i+8JEgkDRr4BNJE8JnAgk+t/42sb2GKtdf8AOCtwADADYvWhxy2YPJAAAAAElFTkSuQmCC'
    })
  });