Repository: next.js
Issue: next/image blur placeholder with conditional rendering is taken down too early in Firefox
Labels: Image (next/image)

### What version of Next.js are you using?

11.1.2

### What version of Node.js are you using?

16.9.1

### What browser are you using?

Firefox

### What operating system are you using?

Windows

### How are you deploying your application?

Vercel

### Describe the Bug

Observation:
* next/image placeholder disappears when image is loading in Firefox
* The image placeholder is taken down too early at the image loading phase (even before the image starts loading)
* In other words, the `onload/onLoadingComplete` function is fired prematurely and hence the placeholder get unset
* This is very obvious when the image component is setup with conditional rendering
* With conditional rendering onload function is executed twice, first time is executed before the image is loaded (it runs when rendering variable is set to true)
* **Without** conditional rendering, `onload/onLoadingComplete` function is still fired early but it run once. However, the time to run onLoad image is still shorter than the time to load the image

conditional rendering example:
```js
import React from 'react'
import Image from 'next/image';
export default function MyImage() {
    console.log('image is rendered');
	let loadTime = Date.now();

    return (
        <Image
            width={1395}
            height={947}
            blurDataURL={
                "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
            }
            placeholder="blur"
            src={"/mountains.jpg"}
            onLoadingComplete={() => {
                console.log("test", Date.now() - loadTime);
            }}
        />
    )
}
```
```js
import MyImage from "../components/image";
import styles from "../styles/Home.module.css";
import { useState } from "react";

export default function Home() {
	const [mountImage, setMountImage] = useState(false);

	console.log('Home is rendered')
	return (
		<div className={styles.container}>
			<button
				onClick={() => {
					setMountImage(true);
				}}
			>
				click to load image
			</button>
			{mountImage && (
				<MyImage/>
			)}
		</div>
	);
}
```

log in Firefox, we could see the first time to execute onLoad function is shorter than the image loading time:
![image](https://user-images.githubusercontent.com/48435910/138230042-bec8c38a-97a4-402f-b362-afaad02be5cd.png)
log in Chrome, we could see the time to execute onLoad function is longer than the image loading time(and it only run once):
![image](https://user-images.githubusercontent.com/48435910/138230008-132869eb-b725-4e34-b341-48e6ac7815b5.png)


### Expected Behavior

onLoadingComplete/onload should be run once only. And placeholder exists until the image is fully loaded. (Chrome will execute `onLoad` once only and gives the expected behavior.)

### To Reproduce

A demo is deployed to vercel. Click the button to update the conditional rendering variable. The base code is from `npx create-next-app@latest`. ([complete repo](https://github.com/yfhui/test-nextjs))

https://test-nextjs-peach.vercel.app/