2

みんな：

あるページから画像のソースURLを取得して、別のページのJavaScriptで使用しようとしています。JQuery .load（）を使用して画像を取り込む方法を知っています。ただし、すべての画像を読み込んでページに表示するのではなく、ソースURLを取得して、JS配列で使用できるようにします。

ページ1は、画像を含む単なるページです。

<html>
  <head>
  </head>
  <body>
    <img id="image0" src="image0.jpg" />
    <img id="image1" src="image1.jpg" />
    <img id="image2" src="image2.jpg" />
    <img id="image3" src="image3.jpg" />
  </body>
</html>

ページ2には私のJSが含まれています。（最終的な目標は、画像を配列に読み込み、ランダム化し、Cookieを使用して、10秒ごとにページの読み込み時に新しい画像を表示することです。これはすべて機能しています。ただし、画像パスをJavaScriptにハードコーディングするのではありません。以下に示すように、IDに基づいてページ1からパスを取得することをお勧めします。このように、画像に「image1.jpg」などのタイトルを付ける必要はありません。）

<script type = "text/javascript">
        var days = 730;
        var rotator = new Object();
        var currentTime = new Date();
        var currentMilli = currentTime.getTime();
        var images = [], index = 0;
        images[0] = "image0.jpg";
        images[1] = "image1.jpg";
        images[2] = "image2.jpg";
        images[3] = "image3.jpg";
        rotator.getCookie = function(Name) { 
            var re = new RegExp(Name+"=[^;]+", "i"); 
            if (document.cookie.match(re)) 
                return document.cookie.match(re)[0].split("=")[1];
                return''; 
        }
        rotator.setCookie = function(name, value, days) { 
            var expireDate = new Date();
            var expstring = expireDate.setDate(expireDate.getDate()+parseInt(days));
            document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
        }
        rotator.randomize = function() {
            index = Math.floor(Math.random() * images.length);
            randomImageSrc = images[index];
        }
        rotator.check = function() {
            if (rotator.getCookie("randomImage") == "") {
                rotator.randomize();
                document.write("<img src=" + randomImageSrc + ">");
                rotator.setCookie("randomImage", randomImageSrc, days);
                rotator.setCookie("timeClock", currentMilli, days);
            }
            else {
                var writtenTime = parseInt(rotator.getCookie("timeClock"),10);
                if ( currentMilli > writtenTime + 10000 ) {
                    rotator.randomize();
                    var writtenImage = rotator.getCookie("randomImage")
                    while ( randomImageSrc == writtenImage ) {
                        rotator.randomize();
                    }
                    document.write("<img src=" + randomImageSrc + ">");
                    rotator.setCookie("randomImage", randomImageSrc, days);
                    rotator.setCookie("timeClock", currentMilli, days);
                }
                else {
                    var writtenImage = rotator.getCookie("randomImage") 
                    document.write("<img src=" + writtenImage + ">");
                }
            }
        }
        rotator.check()
    </script>

誰かが私を正しい方向に向けることができますか？私の勘はJQuery.get（）を使用することですが、これまでのところ成功していません。

明確にできたら教えてください！

4

3 に答える 3

2

これを試して。

<script>
$.get('http://path/to/page/1', function(data) {
    var imgs = $('<div/>').html(data).find('img');
    imgs.each(function(i, img) {
        alert(img.src); // show a dialog containing the url of image
    });
});
</script>
于 2012-10-08T21:29:35.180 に答える
1

なぜこれにクッキーを使いたいのかわかりません。page1を取得し、画像を見つけてから、setIntervalを使用してsrcを更新する必要があります。

$.get('page1.html', function(data, status) { // get the page with the images
    var parser = new DOMParser();
    var xmldoc = parser.parseFromString(data, "text/html");  //turn it into a dom

    var imgs = xmldoc.getElementsByTagName('img'); //get the img tags
    var imageSrcs = Array.prototype.slice.call(imgs).map(function(img) {
       return img.src; //convert them to an array of sources
    });

    setInterval(function() { // run this every 10 seconds
        var imags = document.getElementsByTagName('img'); // find the images on this page
        Array.prototype.slice.call(imgs).forEach(function(img) {
             var imgSrc = Math.floor(Math.random()*imageSrcs.length);  //get a random image source
             img.src = imageSrcs[imgSrc];  //set this image to the src we just picked at random
        });
    }, 10000);

}, 'html');
于 2012-10-08T21:26:39.720 に答える
0

なぜajaxを使用しないのですか？すべての画像を含む外部ページのセクションを.load（）して非表示のコンテナーに入れ、コールバックを介して必要な情報を推定することができます。

external.html

<html>
....
    <div id="imgContainer">
         <img id="image0" src="image0.jpg" />
         <img id="image1" src="image1.jpg" />
         <img id="image2" src="image2.jpg" />
         <img id="image3" src="image3.jpg" />
    </div>
</html>

ajax.js

function ajaxContent(reg, extReg) {

var toLoad = 'external.html' + extReg;

function loadContent() {
    $(reg).load(toLoad,'',getSrcPaths())
}

function getSrcPaths() {
    $(reg + ' #image0').delay(200).fadeIn('slow');
    $(reg + ' #image1').delay(200).fadeIn('slow');
    // or however you want to store/display the images
}
}

次に、onloadはajaxContentを次のように呼び出します。

<body onload="ajaxContent('#hiddenContainer','#imgContainer')">
     ....
</body>

もちろん、画像が大きい場合やページの読み込みに悪影響がある場合、これは実際には関係ありません。これで実際に画像ができたので、非表示にするのではなく、表示するだけでもかまいません。私が思うに、オリジナルをどれだけ操作する必要があるかによって異なります。

于 2012-10-08T21:35:20.287 に答える