Doesn't work after hard reload or on first visit [fix]

[stepanzak]

Hi, on first visit of the website, of after a hard reload (ctrl+shift+R), the globe would load but the image from this plugin would not.
ChatGPT fixed it for me and from what I can tell it works, but I don't want to open purely chatgpt PR. I'ts few changes but still I don't have the knowledge to say it's 100% good code.
Here it is:

// https://github.com/Sheaffy/planetary.js-add-objects-plugin
// chatgpt fixed so the image loads even after hard reload (or first visit)
// it's minor fixes and I checked every change
planetaryjs.plugins.objects = function (config) {
  var objects = [];
  config = config || {};

  var addObject = function (lng, lat, options) {
    options = options || {};

    options.speed = options.speed || config.speed || 0;
    options.imagesrc = options.imagesrc || config.imagesrc || "";
    options.imagewidth = options.imagewidth || config.imagewidth || 50;
    options.imageheight = options.imageheight || config.imageheight || 50;
    options.fade = options.fade || config.fade || false;

    // preload the image once and store it
    if (!options.img) {
      var img = new Image();
      img.src = options.imagesrc;
      options.img = img;
    }

    var ping = { time: new Date(), options: options };
    if (config.latitudeFirst) {
      ping.lat = lng;
      ping.lng = lat;
    } else {
      ping.lng = lng;
      ping.lat = lat;
    }
    objects.push(ping);
  };

  var drawobjects = function (planet, context, now) {
    var newobjects = [];
    for (var i = 0; i < objects.length; i++) {
      var object = objects[i];
      var timechange = now - object.time;
      newobjects.push(object);
      drawobject(planet, context, now, timechange, object);
    }
    objects = newobjects;
  };

  var drawobject = function (planet, context, now, timechange, object) {
    //If Speed is greater than 0 animate object on lng/x axis
    var newlng = 0;
    if (object.options.speed > 0) {
      var xmove = (timechange * object.options.speed) / 100;
      newlng = object.lng + xmove;
    } else {
      newlng = object.lng;
    }

    //Get Spherical Coords from lat lng
    var coords = planet.projection([newlng, object.lat]);
    var img = object.options.img;

    // angle between point and center of projection
    var geoangle = d3.geo.distance(
      [newlng, object.lat],
      [-planet.projection.rotate()[0], -planet.projection.rotate()[1]]
    );

    // closeness used for fading
    var closeness = Math.PI / 2 - geoangle;

    if (geoangle <= Math.PI / 2) {
      var imagewidth = object.options.imagewidth;
      var imageheight = object.options.imageheight;

      if (object.options.fade === true) {
        if (closeness < 0.1) {
          context.globalAlpha = closeness * 10;
        }
      }

      // only draw if the image is loaded
      if (img && img.complete) {
        context.drawImage(
          img,
          coords[0] - imagewidth / 2,
          coords[1] - imageheight / 2,
          imagewidth,
          imageheight
        );
      }

      context.globalAlpha = 1;
    }
  };

  return function (planet) {
    planet.plugins.objects = {
      add: addObject,
      objectList: objects,
    };

    planet.onDraw(function () {
      planet.plugins.objects = {
        add: addObject,
        objectList: objects,
      };

      var now = new Date();
      planet.withSavedContext(function (context) {
        drawobjects(planet, context, now);
      });
    });
  };
};

And here's what the soulless thing said about it:

🔑 Changes I made
Preload the image once in addObject and store it on options.img.
In drawobject, check if (img && img.complete) before drawing → ensures it’s fully loaded.
Removed creating a new Image() on every draw → avoids flickering and wasted network requests.