代码之家  ›  专栏  ›  技术社区  ›  Anders

简单的自制jquery库有时会闪烁

  •  0
  • Anders  · 技术社区  · 15 年前

    编辑:

    我把代码改了一点。首先,我制作了一个保存视图页面模板的辅助母版页。然后我添加了一点ASP脚本来显示第一个图像:

     <img src="<%= string.Format("/Content/Images/Products/{0}1.jpg\"",
                        ViewData["CurrentPage"]) %>"  alt="" class="imgborder" />
    

    我还添加了一个我发现的“预加载”脚本(不确定它是否有效,或者我是否正确地实现了它):

    (function ($) {
        var cache = [];
        $.preLoadImages = function () {
            var args_len = arguments.length;
            for (var i = args_len; i--; ) {
                var cacheImage = document.createElement('img');
                cacheImage.src = arguments[i];
                cache.push(cacheImage);
            }
        }
    })(jQuery)
    

    然后在底部:

    $(document).ready(function () {
            var cPage = '<%= ViewData["CurrentPage"] %>';
            var temp = "";
            for (var i = 1; i <= 6; i++) {
                temp += "\"/Content/Images/Products/" + cPage + i + ".jpg\"";
                if (i < 6) temp += ", ";
            }
            jQuery.preLoadImages(temp);
    });
    

    此外,我修改了swap脚本以修改图像标记,而不是使用jquery生成它:

     function swapImage(val) {
        $("#CenterImage > img").fadeOut("fast", function () {
            var cPage = '<%= ViewData["CurrentPage"] %>';
            var temp = "/Content/Images/Products/" + cPage + val + ".jpg";
            $(this).attr("src", temp);
            $(this).load(function () {
                $(this).fadeIn("slow");
            });
        });
    }
    

    这似乎解决了99%的问题。每隔一段时间,其中一个或两个图像交换的时间会比其他图像要长。还有什么建议吗?

    谢谢!


    您好:

    我用jquery为我的ASP.NET MVC网站制作了一个简单的库。我有一张大的中心图片和6个小缩略图。以下是加载时设置中心DIV的代码:

     $(document).ready(function () {
        var cPage = '<%= ViewData["CurrentPage"] %>';
        var temp = "<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />";
        $("#CenterImage > p").html(temp);
    });
    

    很简单,它从视图状态获取产品,然后使用它来确定图像集。

    以下是交换代码:

    function swapImage(id) {
        $("#CenterImage > p").fadeOut("fast", function () {
            var cPage = '<%= ViewData["CurrentPage"] %>';
            var temp = "<img src=\"/Content/Images/Products/" + cPage + id + ".jpg\" alt=\"\" class=\"imgborder\" />";
            $("#CenterImage > p").html(temp);
            $("#CenterImage > p").fadeIn("slow");
        });
    }
    

    奇怪的是,有时它会无缝地加载图像,有时它会正常地淡出,“冻结”,然后以超快的速度淡出。

    有什么解决这个问题的想法/建议吗?

    2 回复  |  直到 15 年前
        1
  •  1
  •   Igor Zevaka    15 年前

    解决办法是褪色 之后 图像加载方式如下:

    $("#CenterImage > p").load(function() { $(this).fadeIn("slow"); });
    
        2
  •  1
  •   draeton    15 年前

    您正在向DOM中插入一个新的映像,该映像可以缓存,也可以不缓存。最好在插入之前创建元素,绑定一个加载监听器,然后在确定图像已加载之后追加并显示。

    var $temp = $("<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />");
    
    $temp.hide().bind('load', function () {
        $("#CenterImage > p").empty().append($temp);
        $temp.show();
    }