расслоения плотного крючок на процессе загрузки HTML в браузере

Представьте себе, я следующий HTML со многими предметами:расслоения плотного крючок на процессе загрузки HTML в браузере

<html><body> 
    <img src=http://host.com/pic1.jpg> 
    <img src=http://host.com/pic1.jpg> 
    <img src=http://host.com/pic1.jpg> 
</html></body>

владелец сайта добавляет скрипт на страницу без других модификаций:

<script> 
    var some_super_function = ... // what can i put here? 
    some_super_function('host.com','ghost.com'); 
</script>

и во время загрузка этого html, host.com заменяется на hgost.com, поэтому изображения загружаются с другого сервера, как будто были выполнены следующие адреса:

<html><body> 
<img src=http://ghost.com/pic1.jpg> 
<img src=http://ghost.com/pic1.jpg> 
<img src=http://ghost.com/pic1.jpg> 
</html></body>

Я думаю, что выбор $('img') и настройка .attr() - это не очень хорошая идея, потому что это может работать только после загрузки страницы, и я не хочу, чтобы браузер ссылался на host.com вообще.

Я думаю, угловатый JS делает что-то подобное, не так ли?

Возможно ли это?

Спасибо.

источник

2016-01-13 Stepan Yakovenko

Вы можете манипулировать элементами img только после их существования, а это значит, что браузер уже начал загрузку URL-адреса в атрибуте src. Если вы хотите надежно предотвратить это - тогда не ставьте это значение в атрибут 'src' для начала. (Сделайте это 'data-src' или что-то в этом роде - тогда ваш скрипт может передать это значение в атрибут' src'.) – CBroe

должен использовать 'ng-src' в угловом режиме, чтобы избежать неправильных запросов. – charlietfl

Вы можете использовать URL-адрес углового перехватчик для программного изменения маршрута на основе ваших определенных критериев https://docs.angularjs.org/api/ng/service/$http (ctrl + f для 'перехватчика') –

Испытан в светлячок:

<body> 
    <script> 
    document.write('<!--'); 
    var body = null; 
    setTimeout(function() { 
     body = document.body.innerHTML 
     console.log(body) 
    }, 0) 
    </script>

Теперь вы можете извлечь содержимое страницы из body переменных, делать с ними все, что вы хотите, а затем положить в страницу (с jQuery('body').html(...), например). Я не знаю, будет ли это работать, если на странице были комментарии. Существуют и другие способы остановки загрузки страницы. Что-то вроде document.write('<script>');. Я также пробовал document.write('<style>'); в firefox, также работает.

источник

2016-01-17 02:35:52

Похоже, лучшее решение. –

Вы можете использовать угловые нг-Src и {{}} синтаксис, чтобы связать свой домен IMG:

var superFn = function(){ $('img').attr('src','ghost'); } 
 
superFn(); 
 

 
angular.module('myApp',[]).controller('myCtrl',myCtrl); 
 

 
function myCtrl($scope){ 
 
\t $scope.domain = "a3.mzstatic.com"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 
<img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 
<img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 
    
 
</div>

источник

2016-01-13 15:52:04

нет, это не то, что я хочу, я не хочу делать какие-либо замены в источнике html –

Я думаю angularJS делаем что-то подобное, не является Это?

Нет, угловатый использование нг-Src, но для этого вам нужно изменить HTML

Возможно ли это?

Я не думаю, что это можно сделать надежно, с клиентской стороны, без изменения html. Одна из проблем заключается в том, когда документ загружается, браузер будет получать изображения, как только браузер попадет в элемент изображения src, даже если вы можете выполнить скрипт до этого, так как документ не загружен, сценарий не имеет доступа к элементу.

Может быть, вы можете запустить функцию window.setInterval для проверки элементов и изменения источников, но это не будет хорошим подходом.

источник

2016-01-17 02:05:56

Я думаю, я знаю, что вам нужно. Вам нужно определить базу и манипулировать ею для удовлетворения ваших потребностей. Нравится:

<script type="text/javascript"> 
     document.write("<base href='http://yourimageurl.com/' />"); 
</script>

Вы должны использовать этот код перед тегом тела.

Как вы можете установить свои URL-адреса изображений? Таким образом, вы должны зеркалировать имена файлов, чтобы заставить их работать. И только относительный url будет работать.

источник

2016-01-17 02:09:15

Можете ли вы использовать CSS для первоначального скрытия изображений, дождитесь, пока документ будет готов, затем измените изображения и покажите их в JS?

CSS

img { 
    display: hide; 
}

$(document).ready(function() { 
    // ... selecting $('img') and tuning .attr() as mentioned in question 

    // Show the images 
    $('img').show(); 
}

источник

2016-01-19 04:07:25 TinyTheBrontosaurus

Если я не ошибаюсь, это ваше требование.

var some_super_function = function(old_host,new_host) 
 
{ 
 
\t $('img').each(function() { 
 
     var newSrc; 
 
\t \t newSrc = $(this).attr('src').replace(old_host, new_host); \t \t 
 
\t \t $(this).attr('src',newSrc); 
 
\t \t console.log($(this).attr('src')); 
 
\t }); \t 
 
} 
 

 
some_super_function('host.com','ghost.com');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<img src="http://host.com/pic1.jpg" alt="pic1"/><br/> 
 
<img src="http://host.com/pic2.jpg" alt="pic2"/><br/> 
 
<img src="http://host.com/pic3.jpg" alt="pic3"/><br/>

JsFiddle Demo

источник

2016-01-19 12:36:51

В чистом Js вы можете сделать:

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
     some_super_function = function(orig, alt) 
     { 
      Array.prototype.forEach.call(document.querySelectorAll("img[src*='"+orig+"']"), function(img) 
      { 
       var src = img.src; 
       var host = src.replace(/^(.*\/\/[^\/?#]*).*$/,"$1"); 
       img.src = "http://"+src.replace(host, alt); 
      }); 
     } 
     </script> 
    </head> 
    <body> 
     <img id="ol" src="http://www.intertools.net/lib/media/img/selector.png"> 
     <img id="io" src="http://www.intertools.net/lib/media/img/selector.png"> 
     <script> 
      // callable anywhere 
      some_super_function("www.intertools.net", "en.intertools.net"); 
     </script> 
    </body> 
</html>

Чтобы избежать кэширования, вы можете даже использовать (если вы используете html5)

<html manifest="manifest.appcache">

источник

2016-01-19 17:55:49 MTroy

изображения начнут загружаться со старого адреса в этом случае –

Нет, если вы используете manifest.appcache, я протестировал его, он работает на chrome, но на данный момент он не может тестироваться на других. начало загрузки просто отменяется самим хромом. Поведение, которое вы хотите получить, невозможно, потому что изображение загружается каждым во время загрузки DOM ... (и .. js = jquery = angular). Я понимаю вашу проблему, это плохо для трафика и пропускной способности:/ – MTroy

вы можете искать httpd redirect или rewrite правило, чтобы уничтожить проблему. – MTroy

расслоения плотного крючок на процессе загрузки HTML в браузере

ответ

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