Cytoscapejs: Background image in cytoscape loads with delay in Angular App

Question

I have defined all style in a separate 'nodeselector.ts' file

Eg:

export const styles = [{
    "selector": "node",
    "style": {
        "text-valign": "bottom",
        "text-halign": "center",
        "text-margin-y": "5px",
        "text-border-width": "5px",
        "font-size": "12px",
        "shape": "rectangle",
        "background-color": "#dedede",
        "border-color": "#000",
        "background-fit": "none",
        "background-repeat": "no-repeat",
        "background-clip": "none",
        "padding-left": 0,
        "padding-top": 0,
        "padding-right": 0,
        "padding-bottom": 0
    }
}, {
    "selector": ".myclass",
     "style": {
        "background-image": ['assets/myimage.png'],
        'background-image-containment': ['inside'],
        'background-width': ['100%'],
        'background-height': ['100%'],
        'background-position-x': ['0px'],
        'background-position-y':['0px'],
        'background-clip': ['node']
    }
    }
    ]

imported this file in another feature component

import * as nodestyle from './nodeselectors'
import * as cytoscape from 'cytoscape';
CreateGraph() {
    this.cy = cytoscape({
      container: document.getElementById('cy'),
      style: nodestyle.styles,
      layout: {
        name: 'preset',
        rows: 1
      }
    });
  }

<div id="cy">

While loading this on browser window, the background image(myimage.png) is taking so much of time to load, meanwhile a white color patch appears in the place of image, all i could see in the network section under chrome dev tools is a png being request with status as 'pending'. As the number of nodes increases, this may take even more time to load all the nodes. How to resolve this and load all the background images with out any delay ?

Cytoscapejs: Background image in cytoscape loads with delay in Angular App

0 Answers0