docs: add img tag onLoad cookbook 📌 (#7877)

* docs: add img tag onLoad cookbook 📌

* chore: update description ⛄

Author: gioboa

packages/docs/src/routes/demo/cookbook/detect-img-tag-onload/index.tsx

@@ -0,0 +1,16 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  const imgRef = useSignal<HTMLImageElement>();
+  useVisibleTask$(() => {
+    imgRef.value!.decode().then(() => {
+      alert('loaded and ready!');
+    });
+  });
+
+  return (
+    <section>
+      <img ref={imgRef} src="/logos/qwik-logo.svg" height={200} width={200} />
+    </section>
+  );
+});

packages/docs/src/routes/docs/cookbook/detect-img-tag-onload/index.mdx

@@ -0,0 +1,43 @@
+---
+title: Cookbook | Detect img tag onLoad
+contributors:
+ - gioboa
+---
+
+import CodeSandbox from '../../../../components/code-sandbox/index.tsx';
+
+
+# Detect img tag onLoad even if it's cached
+
+When using the onLoad$ property on an \<img\> tag in a Qwik component, you might encounter an issue where the onLoad$ event doesn't fire when the image is already cached in the browser.<br/>
+In that case the onLoad$ logic is not being triggered.<br/>
+This behavior is observed during normal navigation, but not when browser caching is disabled, indicating the cache's impact on the event.<br/>
+The key point here is to [get hold of a DOM element](https://qwik.dev/docs/components/overview/#getting-hold-of-dom-element) to detect onLoad correctly.
+
+### Basic example
+
+<CodeSandbox src="/src/routes/demo/cookbook/detect-img-tag-onload" style={{ height: '20em' }}>
+```tsx
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  const imgRef = useSignal<HTMLImageElement>();
+  useVisibleTask$(() => {
+    imgRef.value!.decode().then(() => {
+      alert('loaded and ready!');
+    });
+  });
+
+  return (
+    <section>
+      <img
+        ref={imgRef}
+        src="/logos/qwik-logo.svg"
+        height={200}
+        width={200}
+      />
+    </section>
+  );
+});
+```
+</CodeSandbox>

packages/docs/src/routes/docs/cookbook/index.mdx

@@ -32,4 +32,5 @@ Examples:
 - [Synchronous Events with State](./sync-events/)
 - [Theme Management](./theme-management/)
 - [Drag & Drop](./drag&drop/)
-- [View Transition](./view-transition/)
+- [View Transition](./view-transition/)
+- [Detect img tag onLoad](./detect-img-tag-onload/)

packages/docs/src/routes/docs/menu.md

@@ -54,6 +54,7 @@
 - [Theme Management](/docs/cookbook/theme-management/index.mdx)
 - [Drag & Drop](/docs/cookbook/drag&drop/index.mdx)
 - [View Transition](/docs/cookbook/view-transition/index.mdx)
+- [Detect img tag onLoad](/docs/cookbook/detect-img-tag-onload/index.mdx)
 
 ## Integrations