Относительные изображения сломанные, требуется исправление javascript

новый здесь. У меня нет доступа к большинству исходных файлов на моем сайте, поэтому я пытаюсь исправить некоторые сломанные изображения при загрузке страницы с помощью javascript.Относительные изображения сломанные, требуется исправление javascript

Когда я использую элемент инспектировать для одного из этих сломанных изображений он показывает, как это:

<img src="-82.jpg" width="60px">

, когда они должны быть

<img src="http://example.com/files/images/-82.jpg" width="60px">

Это для кучу разных изображений, -82. jpg, -2482.jpg, -3582.jpg

Вот что я пробовал до сих пор. Это похоже на работу, но по какой-то причине он ломает другой javascript на странице.

HTML

<script type="text/javascript" src="http://example.com/files/js/fiximages.js"></script> 
<body onload="fixImages();">

мои fiximages.js файл

function fixImages() { 
    var toReplace = '<img src="-'; 
    var replaceWith ='<img src="http://www.example.com/files/images/-'; 
    document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith); 
}

Я немного нуб, так что я также необходимо знать, как связать HTML на javascript, чтобы загрузить его при загрузке страницы. Спасибо, парни.

источник

2014-09-03 learningstuff

Можно ли использовать JQuery? –

@Bonatoc Я не думаю, что это хорошая идея для загрузки целой библиотеки для достижения такой небольшой задачи. – melancia

Вы абсолютно правы. Было уже поздно, и я чувствовал себя ленивым. Поскольку он является noobie, он также научился JQuery. Я согласен, что мы сейчас склоняемся к чистым веб-приложениям Javascript. Кстати, я проголосовал за ваш ответ ниже. –

Это должно решить вашу проблему:

function fixImages() { 
    // Create a list of all img which src starts with "-". 
    var imgs = document.querySelectorAll('img[src^="-"]'); 

    // Loop through this list. 
    for (var i = 0; i < imgs.length; i++) { 
     // For each img, replace its src with the correct path + the 
     // src that's already there. 
     imgs[i].setAttribute('src', 'http://www.example.com/files/images/' + imgs[i].getAttribute('src')); 
    } 
}

Demo

источник

2014-09-03 22:21:25 melancia

Это сработало отлично! Огромное спасибо. – learningstuff

Если вы хотите, чтобы сценарий запускался только после загрузки всей страницы, включая все изображения, обратитесь к этому: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload – melancia

Отмечено как решено, и спасибо за ссылку. Мне было интересно, как этого добиться. – learningstuff

Добро пожаловать на ТАК!

Проблема в вашем подходе заключается в том, что изменение чистого HTML-кода тела никогда не является хорошей идеей для динамической страницы. Кроме того, javascript's replace, при использовании без регулярного выражения, заменит только первое вхождение строки.

Теперь, когда вам нужно изменить атрибут элемента, у Javascript есть манипуляция под названием DOM. В Интернете есть много материалов и учебных пособий ... Вы должны изучить это!

С DOM, вы можете выбрать элемент в качестве переменной, и манипулировать его свойств и атрибутов, поэтому в вашем случае это будет:

function fixImages() { 
    var imgs = document.getElementsByTagName("img"); 
    for(var i=0; i<imgs.length; i++) { 
     if(imgs[i].src.indexOf("-") == 0) 
      imgs[i].src = "http://www.example.com/files/images/" + imgs[i].src; 
    } 
}

источник

2014-09-03 22:23:14 LcSalazar

Просто добавил чек для этого ... В любом случае +1 к вам за использование 'querySelector' – LcSalazar

Я удалил комментарий, потому что вы отредактировали ответ в тот же момент. :) – melancia

Удивительный, спасибо за объяснение и ссылки на tut. – learningstuff

Относительные изображения сломанные, требуется исправление javascript

ответ

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