Question

我有一组用于动画的静态图像。

我有一个帧图像，我想要更新图像，我已经看到很多关于使用javascript动画图像的教程只是简单地更新图像的来源。

frame.src = animation[2].src;等

当我查看chrome中的资源跟踪时，看起来它们看起来不会被缓存，即使Web浏览器确实多次下载图像但每次显示时都不会一次，因此仍然存在一些浏览器缓存继续。

用另一张图片替换帧图像对象的最佳方法是什么？

Answer 1

好吧，你可以绝对定位所有图像并给它们一个z-index，然后使用jQuery / JS来改变它们的z索引，以交叉推子的方式将一个新的图像带到顶部，

或者你可以把所有的id和fadeone比最后一个淡出的快一点。

像这样：

function fader(func) {
var currID = $('#mainimg ul').data('currLI');
var currLiStr = '#mainimg ul li#' + currID;
img = $(currLiStr).find('img').attr('src');
nextID = (currID == 'six') ? 'one' : $(currLiStr).next().attr('id');
nextLiStr = $('#mainimg ul li#' + nextID);
$(currLiStr).fadeOut(3000);
$(nextLiStr).fadeIn(2000).find('div.inner').delay(3000).fadeIn('slow').delay(6000).fadeOut('slow');
$('#mainimg ul').data('currLI',nextID);
}

注意'six'是最后一个li的id，将其重置为一个，但如果你执行$（'＃mainimg ul li：last'）。attr（'id'）;和$（'＃mainimg ul li：first'）。attr（'id'）来获取最后一个和第一个id，你可以允许它处理任意数量的图像（显然这是li的给定id的一，二和等等，但是如果你找到了最后一个id，你可以使用任何结构。或者你可以设置ul宽度所有li的宽度乘以，并给出li的图像宽度，并将overflow设置为hidden，然后使用JS在每次迭代中将li的左边拉1 li的宽度滑块就像我在这里完成的那样：http://www.reclaimedfloorboards.com/

有很多选项

Answer 2

最简单的方法是为每个帧创建一个单独的隐藏图像。像这样：

var nextImage = (function(){
  var imagePaths='basn0g01.png,basn0g02.png,basn0g04.png,basn0g08.png'.split(','),
      imageHolder=document.getElementById('custom-header'),
      i=imagePaths.length, imageIndex=i-1, img;

  for (;i--;) {
    img=document.createElement('img');
    img.src='http://www.schaik.com/pngsuite/' + imagePaths[i];
    if (i) img.style.display='none';
    imageHolder.appendChild(img);
  }

  return function(){
    imageHolder.childNodes[imageIndex].style.display='none';
    if (++imageIndex >= imageHolder.childNodes.length) imageIndex=0;
    imageHolder.childNodes[imageIndex].style.display='inline-block';
  }

}());

在此页面上尝试此示例;将其粘贴到控制台中，然后调用nextImage()几次。观看页面顶部。

修改

如果您已经拥有HTML文档中的所有图像，则可以跳过上述大部分内容并执行以下操作：

var nextImage = (function(){ var imageHolder=document.getElementById('custom-header'), images=imageHolder.getElementsByTagName('img'), i=images.length, imageIndex=0, img; for (;i--;) if (i) images[0].style.display='none'; return function(){ imageHolder.childNodes[imageIndex].style.display='none'; if (++imageIndex >= imageHolder.childNodes.length) imageIndex=0; imageHolder.childNodes[imageIndex].style.display='inline-block'; } }());

Answer 3

我最终使用了jquery replaceWith命令，并为所有帧提供了一个类“框架”，我可以用$（'。frame'）选择，这恰好只选择了可见的帧。

<script type="text/javascript">
        var animation = [];
        var firstFrame = 1;
        var lastFrame = 96;
        var animationFrames = 16;
        var loadedImageCount = 0;

        $(function() {

        $("button, input:submit",'#forecastForm').button();
        $("#progressbar").progressbar({
            value: 0
            });
            $('#id_Species').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
            $('#id_Layer').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
            $('#id_StartTime').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
            $('#id_EndTime').attr('onChange', 'loadAnimation($(\'#id_Species\').val(),$(\'#id_Layer\').val(),$(\'#id_StartTime\').val(),$(\'#id_EndTime\').val())' )
        });


        if (document.images) { // Preloaded images
            loadAnimation('Dry_GEM',1,1,96);
        }
        function rotate(animation, frame)
        {
            if (frame >= animation.length)
                frame = 0;
            $('.frame').replaceWith(animation[frame]);
            window.setTimeout('rotate(animation,'+eval(frame+1)+')',150);
        }
        function loadAnimation(species, layer, startTime, endTime)
        {
            layer = Number(layer);
            startTime = Number(startTime);
            endTime = Number(endTime);
            if (startTime > endTime)
            {
                swap = startTime;
                startTime = endTime;
                endTime = swap;
                delete swap;
                }
            for (i=0;i<animation.length;i++)
                delete animation[i];
            delete animation;
            animation = []
            $('#progressbar').progressbar({value: 0});
            loadedImgCount = 0;
            animationFrames = endTime - startTime + 1;
            for(i=0;i < animationFrames;i++)
            {
                animation[i] = new Image();
                animation[i].height = 585;
                animation[i].width = 780;
                $(animation[i]).attr('class','frame');
                animation[i].onload = function()
                {
                    loadedImgCount += 1;
                    $('#progressbar').progressbar({value: eval(loadedImgCount / animationFrames * 100)});
                };

                animation[i].src = 'http://[[url]]/hemi_2d/' + species + '_' + layer + '_' + eval(i+startTime) + '.png';
            }
        }
    </script>

在地方替换图像

3 个答案: