1

JSON が Firefox で機能しない理由を、このフォーラムやインターネット全体で調べてみました。タブレット、つまりサファリで動作します。Firefox のデスクトップでは動作しますが、ライブになった後は動作しません。解決策のないmimeTypeなど、いくつかのことを試しました（コメントアウト）。$.ajax を使用してみましたが、うまくいきませんでした。Firefox には JavaScript エラーはありませんでした。jQuery 1.7 を使用しています。

Console.log はデータを出力しています。div introCon は空です (firefox のみ)。

$(document).ready(function() {
  jQuery.support.cors = true;
  //$.ajaxSetup({ mimeType: "application/json" });
  /*$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json;   charset=utf-8"}); */

  // loading pictures
  $.getJSON("intro.json?format=json", function(data){
    var links = '';
    var imageload = '';
    var title = '';

    console.log(data);
    $.each(data, function(key, item) {
      links += ' <a href=' + item.image + '>' + key + '</a>';
      imageload += '<img src="' + item.image + ' " />';
      title += item.alt;
    });

    $('.introCon').html(imageload);
    $('.introCon img').hide();
    $('.introCon img:last').fadeIn(500);
    $('.introCon img').fadeIn(1000);

    rotatePics(2);
  });
});

function rotatePics(currentPhoto) {
  var numberOfPhotos = $('.introCon img').length;
  currentPhoto = currentPhoto % numberOfPhotos;
  $('.introCon img').eq(currentPhoto).fadeOut( function() {
    // re-order the z-index
    $('.introCon img').each(function(i) {
      $(this).css(
        'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
      );
    });
    $(this).show();
    setTimeout(function() {rotatePics(++currentPhoto);}, 3000);
  });
}

別のファイルからの単純な JSON を次に示します。

{
  "1" : {
    "image" : "portfolio/chrpic.png",
    "alt"   : "Blah.",
    "detail": "Quartz"},
  "2" : {
    "image" : "portfolio/mysspic.png",
    "alt"   : "Landing page.",
    "detail": "Container"},
  "3" : {
    "image" : "portfolio/decode-pic3.png",
    "alt"   : "Decode this.",
    "detail": "Landing page 2"},
  "4" : {
    "image" : "portfolio/simple-think-pic.png",
    "alt"   : "Simple Think",
    "detail": "simpilify your life"}
}
4

2 に答える 2

0

OK私はこの問題に取り組んでおり、解決策があると思います（JS FiddleのJSON部分を削除しましたが、どのように収まるかがわかると思います）。これが私がこれまでに思いついたものです：

var data = {
    "1": {
        "image": "http://placekitten.com/200/300",
        "alt": "Blah.",
        "detail": "Quartz"
    },

    "2": {
        "image": "http://placekitten.com/g/210/300",
        "alt": "Landing page.",
        "detail": "Container"
    },

    "3": {
        "image": "http://placekitten.com/200/320",
        "alt": "Decode this.",
        "detail": "Landing page 2"
    },

    "4": {
        "image": "http://placekitten.com/g/210/320",
        "alt": "Simple Think",
        "detail": "simpilify your life"
    }
};
var images = [];

$.each(data, function(key, item) {
    images.push('<img src="' + item.image + '" alt="' + item.alt + '"/>')
});

$('.introCon').html(images.join(''));
$('.introCon img').hide();
$('.introCon img:last').fadeIn(500);

rotatePics(2);

function rotatePics(currentPhoto) {
    var numberOfPhotos = $('.introCon img').length;
    currentPhoto = currentPhoto % numberOfPhotos;
    $('.introCon img').eq(currentPhoto).fadeOut(function() {
        // re-order the z-index
        $('.introCon img').each(function(i) {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
        });
        $(this).show();
        setTimeout(function() {
            rotatePics(++currentPhoto);
        }, 3000);
    });
}

コードを見ると、実際に何を経験しているのかを理解するのは少し難しいです。getJSONは良さそうです（サービスが別のドメインにある場合を除いて、corsの部分は不要console.log(data);ですが、データの取得に問題がある可能性を排除します。$。each（）呼び出しは正しいです（私は間違っていました）配列であるかどうかを尋ねる際に）が、画像のリストを作成する際に奇妙なコードがありました。Array.push()文字列連結の方法を使用して、単一の変数に単純化しました（より高速ですが、正直なところ、このスケールではおそらくボトルネックではありません。次に、すべての画像がフェードインする原因となる余分な$('.introCon img').fadeIn(1000);ものがありました。これらの画像をすべて重ねて配置するには、CSSが必要だと思います。img { position: absolute; }。画像がすべて同じサイズ（またはCSSによるサイズ）の場合、これは機能するはずです。私の場合、優れた{placekitten}サービスを使用しているため、異なる画像を取得するには、画像に異なるサイズを指定する必要がありました。

于 2012-11-21T18:03:27.463 に答える
0

このようなことを試してください

  $.each(data, function(key, obj){   
       $.each(obj, function(k, item){  
           links += ' <a href=' + item.image + '>' + key + '</a>';
          imageload += '<img src="' + item.image + ' " />';
           title += item.alt;
        });
  });
于 2012-11-21T07:38:46.290 に答える