Javascript размера при каждой загрузке изображений

Question

Я получил этот код:

while ($row = mysql_fetch_assoc($result1)) { 
echo " 
<a href='#'id='VV".$row['id']."'> 
<p>".$row['title']."</p> 
<p>".$row['date']."</p> 
<img onload='scale()' id='II".$row['id']."' src='../res/videos/img/".$row['img']."'/> 
</a> 
<script type='text/javascript'> 
function scale(){ 
    var image = document.getElementById('II".$row['id']."'); 
    var width = image.width; 
    var height = image.height; 
    if (width > 150) { 
    image.style.width = '150px'; 
    image.style.height = 'auto'; 
    } 
    width = image.width; 
    height = image.height; 
    if (height > 80) { 
    image.style.height = '80px'; 
    image.style.width = 'auto'; 
    } 
    width = image.width; 
    height = image.height; 
} 
VV".$row['id'].".onclick = function() { 
var Result = '".$row['id']."'; 
location.href='loged.php?Result=' + Result; 
    } 
</script> 
"; 
}?> 

Я хочу функцию изменения размера можно назвать на каждом изображении загружено, но она вызывается, когда последнее изображение загружается, и только последнее изображение вступает в силу. Что я должен изменить?

Answer 1

Я думаю, что вы пытаетесь установить изображение в области 150x80. Если это так, я предлагаю вам использовать CSS background-size: contain, чтобы сделать масштабирование для вас.

while ($row = mysql_fetch_assoc($result1)) 
    echo "<a href='#' id='VV" . $row['id'] . "'>" . 
      "<p>" . $row['title'] . "</p>" . 
      "<p>" . $row['date'] . "</p>" . 
      "<div id='II" . $row[id] . "' " . 
       "style='width: 150px; " . 
         "height: 80px; " . 
         "background: url(../res/videos/img/" . $row['img'] . "); " . 
         "background-size: contain; " . 
         "background-repeat: no-repeat;'>" . 
      "</div>" . 
     "</a>"; 

Было бы неплохо абстрагироваться от стилизации в файле CSS.

while ($row = mysql_fetch_assoc($result1)) 
    echo "<a href='#' id='VV" . $row['id'] . "'>" . 
      "<p>" . $row['title'] . "</p>" . 
      "<p>" . $row['date'] . "</p>" . 
      "<div id='II" . $row[id] . "' " . 
       "class='my_img_box' " . 
       "style='background: url(../res/videos/img/" . $row['img'] . ");'>" . 
      "</div>" . 
     "</a>"; 

CSS-

div.my_img_box { 
    width: 150px; 
    height: 80px; 
    background-size: contain; 
    background-repeat: no-repeat; 
} 

Answer 2

Вы размещаете скрипт для каждой строки $. У меня была бы 1 копия функции javascript, и тогда вы можете назвать эту единственную функцию N раз, передавая id функции. Таким образом, он будет работать для всех строк, а не только для последнего (поскольку последняя копия JS-функции будет единственной, вызванной, как вы узнали).

Короткий ответ: сделайте свою функцию лучше, взяв параметр id и только поместите эту функцию на страницу один раз. позволяют вам вызывать эту функцию с каждым идентификатором.