Алексей Рытиков

Сначала нужно подгрузить картинку:

var gif = new Image();
gif.src = "path";

Первый раз картинке выставляешь src на gif.onload:
img.attr('src', gif.src);

Потом свапаешь src с "ничем":

img.attr('src', '');
img.attr('src', gif.src);

Так картинка не будет реально перезагружаться с сервера.

jsfiddle.net/hstadu0b

Можешь в цикле пропускать не нужное:

$db = new mysqli("localhost", "root", "", "gallery"); 
$items = $db->query ("SELECT * FROM table"); 

while ($row = $items->fetch_assoc())
{
    if ($row['g_id'] != 1) continue;
    echo '
    <img src="'.$row["img_1"].'" alt="">
    <img src="'.$row["img_2"].'" alt="">
    <textarea readonly name="text" placeholder="размеры">'.$row["text"].'</textarea>';
}

либо сначала подготовить массивы по искомому ключу:

$db = new mysqli("localhost", "root", "", "gallery"); 
$items = $db->query ("SELECT * FROM table"); 
$itemsByG = array();
while ($row = $items->fetch_assoc())
{
    if(!isset($itemsByG[$row['g_id']]))
    {
        $itemsByG[$row['g_id']] = array();
    }
    $itemsByG[$row['g_id']][] = $row;
}

Это OpenSearch. Пример внедрения.

Решение повесить обработчик "mouseleave" на элементы списков странно, но оно работает (я бы сделал как-то так jsfiddle.net/MBags).
Решение хранить в localStorage весь HTML-код тоже странно, но и оно работает (я бы хранил список строк, например, в JSON).

Проблема в том, что в обработчике на "mouseleave" вы сохраняете в какое-то новое неиспользуемое место в localStorage "content" данные не по всему outputTask, а по конкретной строчке. Вообщем, если вы замените
localStorage.setItem('content', this.innerHTML);
на

localStorage.setItem('todos', outputTask.innerHTML);

то ваше решение заработает.

Во-первых, white-space: pre-line не учитывает пробелы пользователей. Учитывает и переносы и пробелы значение pre-wrap.
Слова обрезаются «в середине», если выставлено word-wrap: break-word. См. htmlbook.ru/css/word-wrap.