Question

我正在开发一个带有图片库和jquery滑块的网页模板。可以在此Link上找到网络模板的实时样本。

现在，当用户点击图像时，它将显示在jQuery滑块内。这是内置的touch.jquery.js脚本的一部分，它将完成jQuery滑块渲染： -

// Show image in the slider
        function showImage(index){

            // If the index is outside the bonds of the array
            if(index < 0 || index >= items.length){
                return false;
            }

            // Call the load function with the href attribute of the item
            loadImage(items.eq(index).attr('href'), function(){
                placeholders.eq(index).html(this);
            });
        }

        // Load the image and execute a callback function.
        // Returns a jQuery object

        function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src', src);}

以下是在jquery滑块内渲染图像时的标记： -

现在我修改了上面的脚本，如下图所示，当它在滑块内加载时，在图像下方显示一个横幅： -

// Preload an image by its index in the items array
        function preload(index){
            setTimeout(function(){
                showImage(index);
            }, 1000);
        }

        // Show image in the slider
        function showImage(index){

            // If the index is outside the bonds of the array
            if(index < 0 || index >= items.length){
                return false;
            }

            // Call the load function with the href attribute of the item
            loadImage(items.eq(index).attr('href'), function(){
                placeholders.eq(index).html(this);
            });
        }

        // Load the image and execute a callback function.
        // Returns a jQuery object

        function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src', src);
            var allcaptions = $("figure span");

            // setTimeout is a hack here, since the ".placeholders" don't exist yet
            setTimeout(function () {
                $(".placeholder").each(function (i) {

                    // in each .placeholder, copy its caption's mark-up into it (remove the img first)
                    var caption = allcaptions.eq(i).clone();
                    //caption.find("img").remove();
                    var t = caption.find("img").attr('data-goto');

                    // caption.append($("<a />", { "text": "test", "href": t }));
                    if (!(t == null || t == "undefined")) {
                        caption.append("<br/>");
                        caption.append("<a href='" + t + "' style='font-size:16px;font-weight:bold'>Read More</a>");
                    }

                    caption.find("img").remove();
                    $(this).append("<div class='caption'>" + caption.html() + "</div>");
                });
            }, 500
    );
        }

以上情况大部分时间都会运作良好。但是，如果互联网很慢并且我点击图像，那么滑块将显示加载图像和横幅文本。当显示图像时，加载图像将与横幅文本一起被移除...所以我不确定我是否可以修改我的上述自定义以强制横幅仅在图像完全加载时显示。在这种情况下，删除加载图像时不会删除横幅。

最后这里是图片库显示在网页内部（不在jquery滑块内）的标记： -

<div class="list_carousel2 responsive">
                    <ul id="carousel2">         
                        <li>
                           <figure><a href="img/page1_bigworks1.jpg" class="thumb"><img  src="img/page1_works1.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                        </li>
                        <li>
                           <figure><a href="img/page1_bigworks2.jpg" class="thumb"><img  src="img/page1_works2.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                        </li>
                        <li>
                           <figure><a href="img/page1_bigworks3.jpg" class="thumb"><img  src="img/page1_works3.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                        </li>
                        <li>
                           <figure><a href="img/page1_bigworks4.jpg" class="thumb"><img  src="img/page1_works4.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                        </li>
                        <li>
                           <figure><a href="img/page1_bigworks5.jpg" class="thumb"><img  src="img/page1_works5.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                        </li>
                        <li>
                           <figure><a href="img/page1_bigworks6.jpg" class="thumb"><img  src="img/page1_works6.jpg" alt=""><span><strong>Project name:</strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                        </li>                   
                    </ul>
                </div>

Answer 1

我想把它作为评论，但我还不准。你可以使用jQuery的.load（）

这可以帮到你： Detect image load

当图像完全加载时，我如何在我的javascript中启动一个函数

1 个答案: