2017-07-25 11 views
-1

javascriptを介してタグにwidth属性とheight属性を追加しようとしています。 img srcはウェブ(http://www....)からのものです。私は高さと幅を追加するjavascript.replaceを使用しています。ここに私のコードです。 (現在は幅のためだけです)。String.replaceのタイムアウト

<!DOCTYPE html> 
<html> 

<body> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script> 
    $(window).load(function() { 

     var htmlString = '<div class="sample"> <img src="https://kbob.github.io/images/sample-5.jpg"> </div><div class="sample_another"><img src="http://www.crazymonkeydefense.com/wp-content/uploads/2012/02/sample-img3.png"> </div> '; 

     function dostuff(img, imgString) { 
      img.onload = function() { 

       imgString = imgString.replace("<img ", '<img width="' + this.width + 'px" '); 
       console.log("modified = " + imgString); 
      }; 
     } 

     var modifyImg = function(imgString) { 
      console.log("original = " + imgString) 

      if (imgString.indexOf('width="') == -1) { 
       var newImgString = (imgString.substring(imgString.lastIndexOf('src="'), imgString.lastIndexOf('"'))).replace('src="', ''); 
       var img = new Image(); 
       img.src = newImgString; 
       dostuff(img, imgString); 
      } 
      return imgString; 
     } 

     modifiedHtmlString = htmlString.replace(/<img[^>]+>/g, modifyImg); 
     console.log(modifiedHtmlString); 


    }); 
    </script> 
</body> 

</html> 

これに伴う問題はhtmlString.replace(/] +>/gで、modifyImg)これは瞬時に実行し、returnステートメントからそれを得ることはなく、その後、未定義であることがModifyImg値を設定することです。

このソリューションにはどのようにアプローチしますか。

+2

'onload'ハンドラ、またはそれ等の内部で呼び出さ任意の関数Aタイムアウトが正しい解決方法ではありません**の内側に、あなたは**置き換えを行う必要があります。 – adeneo

+0

...正規表現の代わりに.setAttribute()を使わないのはなぜですか? – baao

+0

@adeneoこれにアプローチする方法を教えていただけますか? Btwロード時にこの関数を実行したいのですか? – Pujan

答えて

0

done()を使用すると、これを解決するのに役立ちます。あなたは、非同期関数から返すことはできません

$.when(ModifyImg).done(function(v){ 
    modifiedHtmlString = htmlString.replace(/<img[^>]+>/g,v); 
    console.log(modifiedHtmlString); 
}); 
+0

それを試しましたが、それはまだ更新されません同じ結果:( – Pujan

関連する問題