Как правильно вывести изображение?

Question

[Lasqez]

Собственно вопрос простой. Как сделать правильный вывод картинок в цикле?
В интернете есть очень много инфы по данному вопросу, но хотелось бы сделать все максимально правильно с уклоном на производительность.
В общем есть несколько категории товаров. При клике на категорию выводятся товары из базы в цикле (название, код товара, цена и картинка). В силу того что товара много - не везде есть картинка, для таких случаев есть картинка-заглушка no_img.jpg
Пока еще не сделал постраничную навигацию и выгружаются все товары (по 70-80 штук) что заметно влияет на подгрузку картинок и страницы в целом.
Теперь к коду, код вывода товара:

код

<? while($row = mysql_fetch_assoc($result3)): ?>

 <div class='product'>
	<div class='product'><a href='product.php?id=<?= $row['Code']; ?> '><img typeof='foaf:Image' src="<? echo plugins_url( 'img/product_img/' . $row['Code'] . '.jpg' , dirname(__FILE__) ); ?>" onError="this.src='<? echo plugins_url( 'img/product_img/no_photo.gif' , dirname(__FILE__) ); ?>'" width='120' height='120' alt='' /></a></div>
	<div class='product-title'>
		<a href='product.php?id=<?= $row['Code']; ?> '><?= $row['Name']; ?> </a>
	</div>
	
	
	<div class='product-articul'>Код товара: <?= $row['Code']; ?> </div>


	<div class='product-price'><?= $row['PriceShop']; ?> руб</div>

	</div>
    <?= $row['data']; ?>

<? endwhile; ?>

Как видно сейчас используется проверка, если есть в папке картинка с соответствующим кодом, то вывести ее, если нет, то вывести заглушку:

spoiler

<? echo plugins_url( 'img/product_img/' . $row['Code'] . '.jpg' , dirname(__FILE__) ); ?>" onError="this.src='<? echo plugins_url( 'img/product_img/no_photo.gif' , dirname(__FILE__) ); ?>'

Насколько это правильный метод?

Картинки хранятся в папке, название соответствует id товара. Удобно просто, переименовать картинку и кинуть в папку, либо же есть загрузчик на сайте.

Мысль была следующая, при загрузке картинки через сайт, добавлять ее путь в базу данных и делать проверку уже с базой данных при выводе. Либо же вообще загружать картинки в базу, чего как я понял не советуют делать.

Как будет правильно это все реализовать?

Answer 1

[Максим Тимофеев]

подгрузка происходит в клиенте, html формируется на сервере. Никакой связи. У Вас долго грузится по 2 причинам:
1. это wp, он не летает
2. много картинок, каждая - это отдельный запрос на сервер.
Что делать: ну про wp промолчу, в остальном нужно оптимизировать размер картинок, если пагинации нет и там товар кучей. то сделать асинхронную подгрузку. Грузить все нофото, а потом в js загружать фотки вместо заглушки. Например:

<img src="/image/nophoto.png" data-img="/image/product/some_photo.jpg">

Соответственно дожидаемся загрузки страницы, и постепенно заменяем src на data-img. Если пойти дальше и делать оптимизацию под разные размеры дисплея, то есть замечательный тег:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Но можно и первым методом этого добиться. Если в data-img хранить просто имя картинки или даже id товара и формировать url к нужному размеру в js.

Answer 2

[Талян]

охоспаде) вот у людей проблемы) да нормально все. Есть проверка на существование файла - и ок. Тем более у вас на стороне пользователя проверка идет. Нагруза на сервер меньше.

Comments

[Lasqez]

это конечно не проблема) просто хотелось узнать как было бы быстрее - проверка на диске или проверка с базой данных. Это все у меня прикручено к wordpress, поэтому хочется немного оптимизировать свой код.
Визуально долго происходит проверка и подгрузка той или иной картинки.