Marvin for JavaScript Examples - Display More Images Immediately

A molecule table should be displayed as the loading of the page is finished. See below the commented code

Perform asMarvinReady() when the loading of the page is finished:

<body onLoad="asMarvinReady();">

Define a function that is invoked as the marvin JS package is ready.

function asMarvinReady() {
	  marvin.onReady(function(){
		  createTableContent();
	  });
  }

The createTableContent method converts predefined molecules into images and renders them into a table. The generate method is responsible for image generation.

  function generate(mol) {
		if(typeof marvin != 'undefined') { // marvin package is available
			var dataUrl = marvin.ImageExporter.molToDataUrl(mol);
			return dataUrl;
		}
		return null;
  }
  
  function createTableContent() {
	  var molecules = getMolecules();
	  var container = document.getElementById("imageContainer");
	  var divContent = "";
	  for(i=0; i<molecules.length;i++) {
		  var imgData = generate(molecules[i]);
		  if(imgData != null) {
			divContent +="<div class=\"mol-cell\"><span>Compound #"+(i+1)+"</span><img src=\""+imgData+"\" alt=\""+escape(molecules[i])+"\"/></div>\n";
		  }
	  }
	  divContent += '<div class="table-bottom"></div>';
	  container.innerHTML = divContent;
  }
  
  function asMarvinReady() {
	  marvin.onReady(function(){
		  createTableContent();
	  });
  }