【问题标题】:js gallery not working in IE8js 库在 IE8 中不起作用
【发布时间】:2012-04-07 12:52:10
【问题描述】:

这个 js 库在 IE9、FF、Safari 等中运行良好,但在 IE8 中不行。单击拇指时,页面上没有任何反应。

有人知道为什么吗?

我的页面位于here

HTML(精简版):

        <div id="strandScroll">
        <ul>
        <li><a href="images/IMG_8720_.jpg" class="thumbnailStrand"><img src="images/IMG_8720_small.jpg" 
            alt="Image 1" border="0"/></a></li>
        <li><a href="images/IMG_9112.jpg" class="thumbnailStrand"><img src="images/IMG_9112_small.jpg" 
            alt="Thumbnail 2" border="0"/></a></li>
        </ul>
        </div>

        <div id="claspScroll">
        <ul>  
        <li><a href="images/IMG_8626.png" class="thumbnailClasp"><img src="images/IMG_8626.png" 
            alt="Image 1" border="0"/></a> </li>          
        <li><a href="images/IMG_8577.png" class="thumbnailClasp"><img src="images/IMG_8577.png" 
            alt="Thumbnail 2" border="0"/></a></li>       
        </ul>
        <div>

        <div id="combinedStrand">
        <img src="images/IMG_8720_.jpg" max-width 100% alt="Main Image" id="mainImageStrand" class="combinedStrandImage"/>
        </div>

        <div id="combinedClasp">
        <img src="images/IMG_8577.png" alt="Main ImageClasp" id="mainImageClasp" class="combinedClasp"/>
        </div>

js:

            $(function() {
                $('.thumbnailStrand').live('click', function() {
                    $('#mainImageStrand').hide();
                    $('#imageWrap').css('background-image', 'url(ajax-loader.gif)');
                    $('<img />').attr('src', this.href).load(function() {
                          $('#imageWrap').css('background-image', 'none');
                          $('#mainImageStrand').attr('src', $(this).attr('src')).fadeIn();
                    });
                    return false;
              });
             $('.thumbnailClasp').live('click', function() {
                    $('#mainImageClasp').hide();
                    $('#imageWrapClasp').css('background-image', 'url(ajax-loader.gif)');
                    $('<img />').attr('src',this.href).load(function() {
                          $('#imageWrapClasp').css('background-image', 'none');
                          $('#mainImageClasp').attr('src', $(this).attr('src')).fadeIn();
                    });
                    return false;

            $(".thumbnail").click(function() {

        $("#mainImage").attr("src", $(this).attr("src"));   
                        });
              });

        });

提前谢谢...

【问题讨论】:

  • 从 jQuery 1.7 开始,不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。 api.jquery.com/live 当您加载 jQuery 1.7.1 时,这可能是问题所在。尝试将您的 .live() 更改为 .on()
  • 不,恐怕这并没有解决我的问题。但我会听取您的建议并将其更改为 .on()。干杯...

标签: javascript gallery thumbnails


【解决方案1】:

它不起作用,因为您的 load 事件从未被触发。

这可能是(当时)预期的优化,因为加载尚未添加到 DOM 的图像有点毫无意义。

我建议不要乱用 jQuery,而是用老式的方式来做:

var i = new Image();
i.src = this.href;
i.onload = function() {
    $('#imageWrapClasp').css blah blah blah
    more blah here
}

【讨论】:

  • 在这个解决方案中使用 jQuery 很有趣。 :)
  • 对不起,Kolink 听起来很笨,但是我应该在哪里添加这个 js?
  • 使用它来代替当前的&lt;img/&gt; 行。 @Michael:我知道,我懒得改变其余的。 :p
  • 当我尝试将其放入时,我会遇到语法错误:(现在看起来像这样你能告诉我我做错了什么吗?$(function() { $('.thumbnailStrand'). on('click', function() { $('#mainImageStrand').hide(); $('#imageWrap').css('background-image', 'url(ajax-loader.gif)'); var i = new Image(); i.src = this.href; i.onload = function() { $('#imageWrap').css('background-image', 'none'); $('#mainImageStrand ').attr('src', $(this).attr('src')).fadeIn(); }); return false;
  • 消除了语法错误,但没有解决 IE8 问题 :( 任何其他想法为什么会发生这种情况?
猜你喜欢
  • 2011-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-11
  • 1970-01-01
  • 2015-12-19
  • 2012-05-23
相关资源
最近更新 更多