DeveloperBreeze

Lazy-loaded Image

html
<img src='placeholder.jpg' data-src='actual-image.jpg' loading='lazy' alt='Lazy-loaded Image'>

Related Posts

More content you might like

Tutorial
php

Resolving N+1 Query Problems in Laravel

For models with multiple relationships, use nested eager loading:

   $posts = Post::with(['author', 'comments.user'])->get();

   foreach ($posts as $post) {
       echo $post->author->name;

       foreach ($post->comments as $comment) {
           echo $comment->user->name;
       }
   }

Nov 16, 2024
Read More
Cheatsheet
javascript

React Performance Optimization Cheatsheet: Hooks, Memoization, and Lazy Loading

useCallback is used to memoize functions so that they are not re-created on every render unless one of the dependencies changes. This is particularly useful when passing callbacks to child components that rely on referential equality to avoid unnecessary renders.

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <ChildComponent onClick={increment} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Child component re-rendered');
  return <button onClick={onClick}>Increment</button>;
}

Aug 20, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!