Question

问题：
我通过点击一些光标图像来制作jQuery .ajax调用，以便浏览图书目录，用ajax响应（普通html）替换div的内容。有一个光标图像只显示该图书是否有多于1张图片，该图片由php代码控制，该代码直接呈现ajax回调中给出的HTML。

在FF和IE中＆gt; 7脚本正常工作。但是在Webkit浏览器中，ajax回调很好，但它不能正确地渲染CSS。看起来正确的光标图像在第一次显示后会被缓存，即使该图书可能没有任何额外的图像。有趣的是，显示了正确的光标图像，但JS功能不起作用（因为它没有额外的图像应该这样），而且因为当您使用在Chrome中打开的开发人员工具进行导航时，CSS渲染得很好，因为它应该是，就像在FF和IE7中一样。

可能是$（document）.ready？

的错误使用问题

这是作为外部.js文件插入的JS代码：

function goBook(val, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'down'){
         direction = '+';
         inverse = '-';
    }else{
         direction = '-';
         inverse = '+';
    }
    $(document).ready(function(){
         $("div.itemlateral").animate({'top': inverse+"500px"});
         $.ajax({
             url: "projects",
             type: "POST",
             data: { book: val, pic: 0, language: lang },
             dataType: "json",
             success: function(data){
                 $("div.inner-content").html(data.projects);
                 $("div.itemlateral").css({'top': direction+"1000px"});
                 $("div.itemlateral").animate({'top': "0px"});
                 }
             });
         });
     }
}

function nextImg(val, val2, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'right'){
        direction = '+';
        inverse = '-';
    }else{
        direction = '-';
        inverse = '+';
    }
    $(document).ready(function(){
        $("div.node-image").animate({'left': inverse+"500px"});
        $.ajax({
            url: "projects",
            type: "POST",
            data: { book: val, pic: val2, language: lang },
            dataType: "json",
            success: function(data){
                         $("div.inner-content").html(data.projects);
                         $("div.node-image").css({'left': direction+"1000px"});
                         $("div.node-image").animate({'left': "0px"});
                      }
            });
     });
}

Answer 1

经过一些测试后，我会说这不是与javascript相关的，而是webkit中实际模糊的重绘行为错误。

我这样说的原因是因为强制文档重绘时箭头会消失（按ctrl + a或调整窗口大小，或者正如您所说的开放模式中自动重绘文档）。

我做了一些测试，在visibility: hidden;课程中用display: none;替换.disabled [style.css]似乎可以解决问题。

在jQuery ajax成功回调之后，CSS可见性属性无法在Webkit浏览器上运行

1 个答案: