Prevent image loading to show

Prevent image loading to show

Hi,

I am using below to show an image based on date and if not then display default image.

It is working beautifully but I only have one problem.

I am displaying a loading screen until the image is displayed but it is not happening and the loading will go off before the image is display then the user will see the image loading which is ugly

How can I fix this please?

  1. $("#imgHomeSplash").attr("src", "https://people.softnames.com/images/home/splash/NASSER/" + special_date + ".png");

  3. $("#imgHomeSplash").on("load", function () {
  4.     $("#imgHomeSplash").show();
  5.     NasserBinHamad.ShowLoading(false, "Please wait..");
  6. }).on("error", function (e) {
  7.     $("#imgHomeSplash").attr("src", "https://people.softnames.com/images/home/splash/NASSER/" + day_of_month + ".png");
  8.     $("#imgHomeSplash").show();
  9.     NasserBinHamad.ShowLoading(false, "Please wait..");
  10. });


this video shows the problem:



Thanks,
Jassim