當圖像完全加載時，我如何在我的 javascript 中啟動一個函數

Question

我正在開發一個具有圖片庫和 jquery 滑塊的 Web 模板。 可以在此鏈接上找到 Web 模板的實時示例。

現在，當用戶單擊圖像時，它將顯示在 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()

這應該可以幫助您： 檢測圖像負載