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

Question

我正在开发一个包含图片库和 jquery slider 的 Web 模板。可在此 Link 上找到 Web 模板的实时示例.

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

// 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 slider 内呈现图像时的标记:-

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

// 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
    );
        }

以上内容在大多数情况下都可以正常工作。但有时如果互联网速度很慢并且我单击图像，则 slider 将显示加载图像和横幅文本。并且当显示图像时，加载图像将与横幅文本一起被删除...所以我不确定我是否可以修改我的上述自定义以强制横幅仅在图像完全加载时显示。在这种情况下，当加载图像被移除时，横幅不会被移除。

最后这里是图片库显示在网页内(而不是在 jquery slider 内)时的标记:-

<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