Загрузка изображения при загрузке основного изображения

У меня есть сайт электронной коммерции, и когда я получаю все продукты на странице. но все изображение очень высокое. я хочу, пока основная загрузка изображения до загрузки изображения будет отображаться пользователю. ThnxЗагрузка изображения при загрузке основного изображения

$sqlpro="select * from tbl_product $where"; 
$respro=mysql_query($sqlpro); 
$totalproduct=mysql_num_rows($respro); 
if($totalproduct>0) 
    { 
     while($rowpro=mysql_fetch_array($respro)) 
    { 
<a href="saree?id=<?php echo base64_encode($rowpro['pro_unickid'])?>"> 
    <img src="ajax_loader-2.gif" id="loding_image<?php echo $rowpro['pro_unickid']?>" /> 
     <img src="admin/<?php echo $rowpro['thumbimage1']; ?>" id="image_of_product<?php echo $rowpro['pro_unickid']?>" 
        onmouseover="this.src='admin/<?php echo $rowpro['thumbimage2']; ?>',imagehidesaree('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');" 
        onmouseout="this.src='admin/<?php echo $rowpro['thumbimage1']; ?>',imagemouseout('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');" 
        width="243" height="359" /> 
        </a> 
} 
}

источник

2013-11-29 Mukesh Kumar Bijarniya

Вы можете заново объяснять ваши потребности ? его любопытное трудно получить это правильно –

Я просто хочу, пока основное изображение не будет полностью загружено до отображения изображения загрузки на его ладони .. –

Можете ли вы использовать маску для загрузки? –

<img style="background:url('ajax_loader-2.gif') no-repeat center;" src="admin/<?php echo $rowpro['thumbimage1']; ?>" id="image_of_product<?php echo $rowpro['pro_unickid']?>" onmouseover="this.src='admin/<?php echo $rowpro['thumbimage2']; ?>',imagehidesaree('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');" onmouseout="this.src='admin/<?php echo $rowpro['thumbimage1']; ?>',imagemouseout('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');" width="243" height="359" />

Как насчет установки загрузчика изображений в качестве фона элемента IMG.

источник

2013-11-29 09:51:26

Вы можете написать немного jQuery, который связывается с любым тегом img с заданным классом.

E.g.

В вашем HTML вы поставите низким разрешением версии в вашей IMG тег, дать ему класс, чтобы сказать, что это необходимо переключить и добавить атрибут данных для расположения высокого разрешения версии
Bind на " onload ", так что когда он будет загружен, он добавит идентичный тег img с высоким разрешением src - но скрыт
Привяжите событие 'onload', чтобы при загрузке он скрывал версию с низким разрешением и заменяется высоким разрешением.

Хотя это не делает все, что вы хотите его - вот POC, чтобы показать, что я имею в виду:

$('.LowToHiRes').on('load', function() { 
    newSrc = $(this).data('high-res-src'); 
    $(this).after('<img class="HiRes Hidden" src="'+newSrc+'" />'); 
    bindHiResLoader($(this)); 
}); 

function bindHiResLoader(element) { 
    element.next().on('load', function() { 
     $(this).prev().hide(); 
     $(this).show(); 
    }); 
}

Там в демо здесь: http://jsfiddle.net/kX279/1/

источник

2013-11-29 11:26:43

Загрузка изображения при загрузке основного изображения

ответ

Смежные вопросы