Question

我正在测试Jssor并取得了成功。当我编辑代码以使用Ajax从另一个文件获取幻灯片内容时，它将停止工作。

但是如果相反我将它们添加到没有Ajax的代码中它再次起作用。有一种方法可以动态加载图像吗？

Ajax功能：

function getImages(n, type){
$.ajax({
    url: "./r/"+type+"/"+n+"/img",
    success: function(data){
        $("#slcont").html(data);
    },
    error: function(){
        alert("Problem loading page. Try later.");
    }
});
}

导入文件内容：

<div>
                <img u="image" src2="./i/works/web/1/w1_0.jpg" />
            </div>
            <div>
                <img u="image" src2="./i/works/web/1/w1_1.jpg" />
            </div>

任何想法？

我还尝试从不同的地方调用GetImages（），包括

jQuery(document).ready(function ($) {
        getImages(i,t);
        var options = {

注意： #slcont 是分配给<div u="slides" ...>的ID 我会避免发布完整的代码，它会很长，无论如何它都是相同的例子。

Answer 1

与ajax调用没有冲突。您可以在ajax调用返回时初始化jssor滑块。

var jssor_slider1;
function getImages(n, type){
$.ajax({
    url: "./r/"+type+"/"+n+"/img",
    success: function(data){
        //you can optionally pause the slider if it exists already.
        if(jssor_slider1)
            jssor_slider1.$Pause();

        //empty slider1_container and repopulate html code in slider1_container again, and then reinitialize jssor slider.
        $("#slcont").html(data);
        ...
        jssor_slider1= new $JssorSlider$("slider1_container" ...;
    },
    error: function(){
        alert("Problem loading page. Try later.");
    }
});
}

JSSOR与Ajax冲突？

1 个答案: