Question

我想制作图像流程，如本例image flow所示，但图像将在运行时来自数据库，我面临的问题是我需要包含使图像流动的js文件在AJAX调用加载图像之后，这将被取消。

我这样做

 $.ajax({
    url: uri+"/getAds",

    type: "POST",
    success: function(result){
        adsData = jQuery.parseJSON(result);

        var items="" ;
        $.each(adsData,function(index){
            items+="<img src='"+adsData[index].img+"' id="+adsData[index].id+"/>";

        });

        $("#myImageFlow").html(items);
     //   alert("done");
         addScript("scripts/imageflow.js");
    }

这是添加脚本的函数

function addScript(url) {
 var script = document.createElement('script');
 script.src=url;
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

但是脚本没有被执行，我认为它需要等到所有图像都被加载或类似的东西，我该怎么办？

Answer 1

改用jQuery的getScript方法。

$.getScript("scripts/imageflow.js");

您可以选择提供一个回调处理程序，该处理程序将在脚本加载后执行。

$.getScript("scripts/imageflow.js", function(){
    //You can use any method or properties defined in imageflow.js here
});

如果有更多图像，那么您可能需要等待，直到在执行图像流脚本之前所有图像都加载到页面上。您可以使用img元素load方法来确定图像是否已加载。试试这个。

success: function(result){
        adsData = jQuery.parseJSON(result);

        var items="", imageCount = 0, totalImages = adsData.length ;
        $.each(adsData,function(index, data){
            $("<img id=" + data.id + " />")
            .load(function(){
               imageCount++;//Increment the imageCount 
               if(imageCount == totalImages){
                   //All the images are loaded now load the script
                   $.getScript("scripts/imageflow.js");
               }
            })
            .error(function(){
               imageCount++;//In case of error just increment imageCount
            })
            .attr("src", data.img)
            .appendTo("#myImageFlow");

        });
}

注意，在上面的脚本中，我在设置src属性并保持加载的图像数之前为每个图像附加一个加载事件处理程序。加载图像后，imageCount会增加，如果imageCount等于totalImages，则加载脚本以确保加载所有图像。而不是字符串连接来创建html我使用appendTo方法将匹配元素集中的每个元素插入到目标的末尾

参考文献：

getScript()：http://api.jquery.com/jQuery.getScript/
appendTo()：http://api.jquery.com/appendTo/

为图像创建动态图像流

1 个答案: